8.6 Transformation CSS

• translate : déplace l’élément le long de 3 axes (x, y et z)
• rotate : déplace l’élément autour d’un point central
• scale : redimensionne l’élément
• skew : déforme l’élément

les propriétés de transformation

Il y a 3 propriétés de transformation CSS disponibles :

• transform définit la fonction de transformation à utiliser (translation, rotation, mise à l’échelle, etc. – translate, rotate, scale…)
• transform-origin permet de modifier le point d’origine d’une transformation (fonctionne comme les positions d’arrière-plan)
• transform-style pour les paramètres 3D

Notez que contrairement à background et à border, transform n’est pas une propriété abrégée.

Nous n’utiliserons que transform ici.

Ne brisez pas le flux

Pour éviter tout comportement inattendu, les éléments transformés n’affectent pas le flux. Qu’elles soient tournées, mises à l’échelle ou traduites, elles n’affecteront pas les autres éléments.

translate

The translate() function allows to move an element across the plane (on the x and y axis). It accepts either:

La fonction translate() permet de déplacer un élément sur le plan (sur les axes x et y). Il accepte soit :

• 1 paramètre : déplace l’élément le long de l’axe x
• 2 paramètres : la première valeur est pour l’axe des x, la seconde pour le y

C’est comme utiliser un positionnement relatif avec les valeurs gauche et supérieure.

Reprenons l’animation de notre circuit en utilisant la traduction au lieu du positionnement gauche / haut :

@keyframes translating {
  0% { transform: translate(0, 0);}
  25% <span class="p">{ transform: translate(240px, 0);}
  50% <span class="p">{ transform: translate(240px, 140px);}
  75% <span class="p">{ transform: translate(0, 140px);}
  100%{ transform: translate(0, 0);}
}
p { animation: translating 4s linear infinite;}

Rappelez-vous : transform est la propriété CSS,translate() est la valeur CSS attachée à cette propriété (et se trouve être une fonction).

You can use translateX() and translateY() to only move your element along the x and y axis respectively.

Vous pouvez utiliser translateX() et translateY() pour déplacer votre élément uniquement le long des axes x et y, respectivement.

rotate

The rotate() function allows to make an element revolve around a fixed point. By default, it revolves around the element’s center. Think of it as vinyl being played on a turntable.

La fonction rotate() permet de faire tourner un élément autour d’un point fixe. Par défaut, il s’articule autour du centre de l’élément.
Pensez-y comme un vinyle joué sur une platine.

rotate() accepts only 1 parameter, which is an angle value defined in degrees deg, gradians grad, radians rad or turns turn (with 1 turn being equivalent to a full circle).

rotate() n’accepte qu’un seul paramètre, qui correspond à une valeur d’angle définie en degrés deg, gradians grad, radians rad ou tour turn (1 tour équivaut à un cercle complet).

@keyframes rotating {
  0% { transform: rotate(0deg);}
  100%{ transform: rotate(360deg);}
}
p { animation: rotating 4s linear infinite;}

scale

The scale() function allows to resize an element. It can either expand or shrink it. The function accepts either:

La fonction scale() permet de redimensionner un élément. Elle peut soit l’agrandir, soit le réduire. La fonction accepte soit :

• 1 paramètre : the element is resized uniformily in height and width
• 2 paramètres : la première valeur redimensionne l’élément horizontalement, la seconde verticalement

La plage de valeur possible est :

• 1 : l’élément conserve sa taille d’origine
• 2 : la taille de l’élément double
• 0.5 : l’élément est la moitié de sa taille
• 0 : l’élément disparaît fondamentalement (sa hauteur et sa largeur sont égales à zéro)
• -1 : l’élément est mis en miroir

@keyframes scaling {
  0% { transform: scale(1);}
  20%{ transform: scale(2);}
  40%{ transform: scale(0.5);}
  60%{ transform: scale(0);}
  80%{ transform: scale(-1);}
  100%{ transform: scale(1);}
}
p { animation: scaling 10s steps(1) 0s infinite;}

Like translate(), the scale() function has x and y versions: scaleX() and scaleY() to resize horizontally and vertically respectively.

Comme translate(), la fonction scale() a les versions x et y : scaleX() et scaleY() pour redimensionner horizontalement et verticalement, respectivement.

skew

La fonction skew() permet de déformer un élément en faisant glisser ses côtés le long d’une ligne.

Cette fonction de transformation est rarement utilisée car ses effets sont assez imprévisibles et ses résultats peu attrayants. Voyons néanmoins comment cela fonctionne.

Comme pour scale(), les fonctions skew() acceptent soit :

• 1 paramètre : l’élément est déformé horizontalement
• 2 paramètres : la première valeur déforme l’élément horizontalement, la seconde verticalement

Et, de la même manière que rotate(), skew() accepte uniquement les valeurs d’angle telles que degrés deg.

@keyframes skewing { 
  0% { transform: skew(0deg);}
  20% <span class="p">{ transform: skew(10deg);}
  40% <span class="p">{ transform: skew(45deg);}
  60% <span class="p">{ transform: skew(90deg);}
  80% <span class="p">{ transform: skew(120deg);}
  100%{ transform: skew(0deg);}
}
p { animation: skewing 10s steps(1) 0s infinite;}

3d functions – Fonctions 3D

Nous avons vu comment les fonctions de transformation fonctionnent dans un plan, le long des axes x et y.

Par exemple:

• translate() avec jusqu’à 2 paramètres :
  • translate(x)
  • translate(x,y)
• translateX() en tant que x uniquement
• translateY() comme y seulement

Mais toutes ces fonctions ont aussi une version 3D.

Par exemple, translate() a une version translate3d() qui effectue une transformation sur 3 dimensions, ce qui signifie qu’elle inclut également l’axe z (et qu’en tant que telle, une fonction autonome translateZ() existe également).

Le paramètre z amène l’élément à se rapprocher et à s’éloigner, que l’on augmente ou diminue sa valeur. C’est comme un zoom avant et arrière.

@keyframes zooming {
  0% { transform: translate3d(0, 0, 0);}
  100%{ transform: translate3d(0, 0, 200px);}
}
p { animation: zooming 5s alternate;}

Le bloc vert monte de 200px «vers le haut», comme s’il se rapprochait de nous, le long de l’axe z.

perspective: 500; doit être appliqué à l’élément parent pour que l’espace 3D devienne actif. Alternativement, transform: perspective(500px); peut aussi bien être utilisé.