Propriété CSS transform, 8 fonctions de modification des éléments HTML

La propriété CSS « transform » est un outil très utile au webmaster freelance. Elle permet de modifier les coordonnées spatiales ou le volume d’un élément en agissant sur l’algorithme de modèle de mise en forme (le Visual Formating Model). Utiliser la propriété CSS transform nécessite donc de comprendre et d’appliquer les fonctions CSS de transformation telles que skew, scale, rotate ou perspective

Les valeurs possibles de transform sont des fonctions de manipulation de l’élément HTML, mais il faut noter que nombre de ces fonctions sont aussi utilisable comme des propriétés CSS. Les paramètres attendus des fonctions seront alors utilisés comme valeurs de propriété.

Dans cet article je vous propose un tour d’horizon des différentes fonctions de transformation

N.B. seuls les éléments dits « transformables » pourront être « transformés » c’est à dire tous les éléments répondant au modèle de boîte à quelques exceptions près.

La fonction rotate()

La fonction de rotation est relativement intuitive, elle permet d’établir une rotation autour d’un point fixe, sur un axe déterminé par sa lettre (x, y ou z).

Notons que rotate peut être utilisée comme propriété CSS ou valeur de la propriété transform.

.mon-selecteur :hover {
	transform:  rotate(45deg);
}

La fonction passée en valeur de transform équivaudra à une rotation sur l’axe X alors que la propriété rotate pourra recevoir :

• Un axe et le degré de rotation appliqué
• Une série de 3 coefficients à appliquer sur les axes X, Y et Z et le degré appliqué.

.mon-selecteur :hover {
	rotate :  z 45deg ;
}

La propriété rotate acceptera ainsi une valeur multiple correspondant à des coefficients de rotation, respectivement sur les axes x y z en fonction d’un valeur donnée.

Par exemple :

.mon-selecteur :hover {
	rotate :  1 6 4 60deg ;
}

Ici un coefficient de 1 est appliqué à l’axe des X, et 4 à l’axe Z.

rotate3D()

La fonction rotate3d() sera utilisée avec la propriété transform. De la même façon, on lui passera 3 coefficients, soit 1 par axe, ainsi qu’un angle d’application globale :

.monselecteur {
	transform : rotate3D( 1, 1, 2, -144deg ); 
}

skew()

La fonction CSS skew() permet d’étirer un objet en direction d’un angle calculé sur l’axe X et/ou Y.

 De façon un peu caricaturale, un carré sera aplati sur l’axe des x avec skewX(90deg) et totalement allongé avec skewY(90deg).

Bien sûr, si vous testez ces règles vous ne verrez plus l’élément puisque cette distorsion réduira son volume à 0.

.monselecteur {
	transform : skew( 43deg, 14deg ); 
}

scale()

La fonction scale() se contente de mettre l’élément à l’échelle selon 2 coefficients « d’étirement » sur les axes X et Y. Il sera donc possible de déformer un objet sur un plan 2d.

scale3D()

La fonction scale3d() est le pendant 3D de scale(). Elle admet 3 paramètres au lieu de 2, le 3^e étant le coefficient d’échelle de l’axe Z.

Scale3D permettra de déformer toute forme sur un plan 3D.

translate()

La fonction CSS translate() permet de modifier les coordonnées d’un élément.

Lorsqu’un unique élément lui est passé, la même valeur est appliquée aux axes X et Y. 2 éléments distincts permettront de modifier ces valeurs de façon indépendantes.

N.B. les unités des valeurs passées à la fonction translate pourront être relatives ou absolues (em, rem, px, %, etc.).

.monselecteur {
	transform : translate( X%, Xpx ); 
}

La fonction perspective()

La fonction transforme admet plusieurs fonctions simultanées, il sera donc possible de contrôler une rotation X et Y, une mise à l’échelle et une modification de perspective.

Attention cependant à l’ordre de déclaration de ces fonctions puisque la fonction perspective(), lorsqu’elle est utilisée doit être placée en début de déclaration.

.mon-selecteur {
	transform : perspective(180px) rotateY(7deg) 
}

Comme vous pouvez le voir, la fonction perspective prend ici une valeur en px, mais vous pouvez aussi utiliser des « cm » ou des valeurs relatives en « em » ou « rem ».

La fonction CSS perspective n’est pas forcément très intuitive au premier abord, mais elle devient magique lorsque vous jouez avec via l’outil de développement de votre navigateur.

Ce qu’il faut comprendre est qu’elle va être utilisée en conjonction d’une fonction rotateY() qui servira à ouvrir l’angle de vue de l’élément.

Ainsi, une perspective de valeur quelconque n’aura aucune incidence pour un angle de 0 sur l’axe Y :

.mon-selecteur {
	transform : perspective(180px) rotateY(0deg) ;
}

En revanche, dès qu’un angle est déclaré sur cet axe, une perspective proche du zéro aura un impact énorme puisqu’elle simulera une distance de 0 sur l’axe « z » (un peu comme si votre œil était collé à l’objet) :

.mon-selecteur {
	transform : perspective(0px) rotateY(7deg) ;
}

Mon conseil est de jouer avec ces valeurs directement dans le navigateur afin de définir vos valeurs en situation réelle.

Enfin l’avantage avec la fonction perspective() est qu’il est possible de tirer parti de son lien avec la fonction de rotation pour animer vos objet au survol (hover). Vous pourrez ainsi vous contenter de remettre à zéro votre rotation au passage de la souri et vous voilà avec une animation spectaculaire..

 .mon-selecteur :hover {
	transform : rotate(0) ;
}

matrix()

6 coefficients de transformation d’une matrice permettant « étirer » un élément sur ses axes X et Y (paramètres A et D), de lui assigner un étirement (paramètres B et C) ainsi qu’une translation de coordonnées (paramètres TX et TY) :

A C TX
B D TY

Ainsi ces deux déclarations CSS auront le même effet :

.mon-selecteur {
	transform : scale( 1.5, 1.5) ;
}
.mon-selecteur {
	transform : matrix( 1.5, 0, 0, 1.5, 0, 0) ;
}

Un exemple plus parlant pourrait consister à étendre un élément sur des coefficients de 1.2 sur l’axe X, 1.1 sur l’axe Y, tout en appliquant un skew de 1.2 sur X et 0.1 sur Y, pour finir par une translation de coordonnées par 80 sur X et 20 sur Y (notez l’absence d’unité passée aux valeurs de matrix() :

.mon-selecteur {
	transform : matrix( 1.2, 1.2, .1, 1.1, -80, 20) ;
}

N.B. Il n’est pas forcément très évident de calculer les paramètres matriciels attendus. Mon conseil, utilisez l’outil de développement de votre navigateur pour jouer avec la fonction et récupérer les paramètres lorsque le résultat vous convient 😉

N.B. retrouvez plus d’information sur la propriété CSS transform