Formation Apprendre le CSS : Les transformations

Dans ce chapitre, on va s'intéresser à la propriété transform qui permet d'appliquer des transformations à un élément (le déplacer, le redimensionner, le faire tourner ou encore le déformer).

Le principe de transform

La propriété transform accepte une ou plusieurs fonctions de transformation. Par exemple :

.box {
  transform: translate(100px, 50px);
}

Ici, l'élément est déplacé de 100px sur l'axe horizontal et de 50px sur l'axe vertical.

Les transformations les plus courantes sont :

• translate() pour déplacer un élément
• scale() pour le redimensionner
• rotate() pour le faire tourner
• skew() pour le déformer

Déplacer un élément avec translate()

La fonction translate() permet de déplacer un élément par rapport à sa position d'origine.

.box {
  transform: translate(100px, 100px);
}

Cela signifie :

• 100px sur l'axe X, donc vers la droite
• 100px sur l'axe Y, donc vers le bas

On notera que l'axe Y est orienté vers le bas en CSS.

Le cas particulier des pourcentages

Avec transform, les pourcentages ont une particularité importante : ils sont calculés par rapport à la taille de l'élément lui-même, et non par rapport à son parent.

.box {
  transform: translate(-50%, -50%);
}

Cette écriture est très fréquente. Elle permet de déplacer l'élément de la moitié de sa propre largeur et de la moitié de sa propre hauteur.

C'est particulièrement pratique pour centrer ou repositionner un élément dont on ne connaît pas exactement les dimensions.

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Redimensionner avec scale()

La fonction scale() permet d'agrandir ou de réduire un élément.

.box {
  transform: scale(1.2);
}

Quelques repères utiles :

• 1 signifie aucune transformation
• 0.5 réduit l'élément de moitié
• 2 double sa taille

Attention, scale() ne change pas seulement les dimensions du bloc : tout le contenu est transformé visuellement, comme si on zoomait ou dézoomait. C'est une transformation très utilisée pour les effets de survol :

.card:hover {
  transform: scale(1.05);
}

Faire tourner un élément avec rotate()

La fonction rotate() permet d'appliquer une rotation.

.box {
  transform: rotate(45deg);
}

On peut utiliser des degrés deg ou des turn

.box {
  transform: rotate(0.5turn);
}

0.5turn correspond à un demi-tour, donc 180deg.

Déformer un élément avec skew()

La fonction skew() permet de déformer un élément sur les axes X et Y.

.box {
  transform: skew(10deg, 10deg);
}

L'effet est plus particulier que les autres transformations, mais il peut être utile pour certains effets graphiques.

Les variantes selon les axes

La plupart des transformations existent aussi sous forme plus précise :

• translateX(), translateY(), translateZ()
• scaleX(), scaleY(), scaleZ()
• rotateX(), rotateY(), rotateZ()

Par exemple :

.box1 {
  transform: translateX(200px);
}
.box2 {
  transform: rotateY(45deg);
}

Transformation 3D

Certaine transformation comme le rotate() et le translate() peuvent travailler dans un espace 3D.

Par exemple on peut tourner un élément sur le côté en suivant l'axe vertical.

.box {
  transform: rotateY(45deg);
}

Ajouter de la profondeur avec perspective

Quand on utilise des transformations 3D, le parent peut définir une perspective ce qui va influencer le rendu des transformations 3D enfant.

.scene {
  perspective: 800px;
}

.box {
  transform: rotateY(45deg);
}

La propriété perspective agit un peu comme la position de la caméra. Plus la valeur est petite, plus l'effet de profondeur est marqué. Plus elle est grande, plus l'effet paraît éloigné.

On peut aussi utiliser translateZ() :

.box {
  transform: translateZ(200px);
}

Cette transformation rapproche visuellement l'élément de l'écran. Là encore, l'effet n'a vraiment de sens que si le parent a une perspective.

Changer le point d'origine avec transform-origin

Par défaut, les transformations se font à partir du centre de l'élément.
Mais on peut changer ce point d'origine :

.box {
  transform-origin: top left;
}
.box2 {
  transform-origin: 100% 100%;
}

L'origine n'impacte pas les translations mais par contre cela a de l'importance quand on utilise des rotations.

Cumuler plusieurs transformations

Il est possible de chaîner plusieurs transformations sur un même élément :

.box {
  transform: translateX(200px) rotate(45deg);
}

L'ordre des transformations a une importance : l'élément est d'abord déplacé, puis tourné.

Par exemple :

transform: translateX(200px) rotate(45deg);

ne donne pas le même résultat que :

transform: rotate(45deg) translateX(200px);

Pourquoi ? Parce qu'après une rotation, le repère de l'élément change. La translation suivante ne se fait donc plus selon le même axe.

Ce point est essentiel : deux transformations identiques, dans un ordre différent, peuvent produire des résultats très différents.

Le même principe s'applique avec scale().

transform: translateX(200px) scale(2);
transform: scale(2) translateX(200px);

Ces 2 transformations ne produisent pas le même rendu. Dans le second cas, la translation s'applique après un changement d'échelle. Le décalage visuel sera donc beaucoup plus important.

Les propriétés individuelles

En plus de transform, CSS propose aussi des propriétés séparées :

• translate
• rotate
• scale

Par exemple :

.box {
  translate: 100px 0;
  rotate: 45deg;
  scale: 1.2;
}

Ces propriétés existent, mais dans la pratique on utilise encore très souvent transform, car il est plus direct lorsqu'on veut enchaîner plusieurs transformations.

transform crée un nouveau contexte d'empilement

Enfin, un détail technique important : lorsqu'un élément reçoit une transformation, cela crée un nouveau contexte d'empilement.

Cela signifie que les z-index des enfants vont désormais se gérer à l'intérieur de ce nouveau contexte, et non plus à l'échelle de tout le document.

Ce comportement peut expliquer certains bugs visuels où un élément semble refuser de passer au-dessus d'un autre malgré un z-index élevé. Si vous voulez plus d'informations n'hésitez pas à vous rendre sur la documentation MDN sur le sujet.