CSS Transform - transformations 2D et 3D

Bienvenue de nouveau dans la Vallée des Rois ! Tout comme les anciens Égyptiens pouvaient transformer une simple pierre en majestueuses sculptures de dieux, en CSS nous pouvons transformer des éléments - les déplacer, les faire tourner, les redimensionner et les incliner dans l'espace 2D et 3D. Transform est la clé pour créer des interfaces modernes et dynamiques !

Qu'est-ce que Transform ?

Transform permet une transformation géométrique d'un élément sans affecter la disposition des autres éléments. L'élément est transformé visuellement, mais son espace d'origine dans le document reste inchangé.

Avantage clé : Transform est accéléré par le GPU, ce qui signifie des performances extrêmement élevées !

1.element {
2  /* L'élément se déplace, mais n'affecte pas les autres éléments */
3  transform: translateX(100px);
4}

Analogie égyptienne : c'est comme l'ombre d'une pyramide - la pyramide reste à sa place, mais son ombre se déplace selon le soleil.

Transform 2D - fonctions de base

1. Translate - déplacement

1/* Déplacer horizontalement */
2.element {
3  transform: translateX(100px);  /* Vers la droite de 100px */
4  transform: translateX(-50px);  /* Vers la gauche de 50px */
5}
6
7/* Déplacer verticalement */
8.element {
9  transform: translateY(50px);   /* Vers le bas de 50px */
10  transform: translateY(-30px);  /* Vers le haut de 30px */
11}
12
13/* Déplacer dans les deux directions */
14.element {
15  transform: translate(100px, 50px);  /* X, Y */
16}
17
18/* Pourcentages relatifs à la taille de l'élément */
19.element {
20  transform: translate(50%, -100%);
21  /* 50% de sa largeur vers la droite */
22  /* 100% de sa hauteur vers le haut */
23}

Utilisation pratique - centrage :

1.center {
2  position: absolute;
3  top: 50%;
4  left: 50%;
5  transform: translate(-50%, -50%);  /* Centrage parfait ! */
6}

2. Scale - mise à l'échelle

1/* Agrandir 2x */
2.element {
3  transform: scale(2);  /* 200% de la taille */
4}
5
6/* Réduire de moitié */
7.element {
8  transform: scale(0.5);  /* 50% de la taille */
9}
10
11/* Échelles différentes en X et Y */
12.element {
13  transform: scale(2, 0.5);  /* 2x en largeur, 0.5x en hauteur */
14}
15
16/* Seulement X ou seulement Y */
17.element {
18  transform: scaleX(1.5);  /* Étirer horizontalement */
19  transform: scaleY(0.8);  /* Compresser verticalement */
20}
21
22/* Réflexion en miroir */
23.element {
24  transform: scaleX(-1);  /* Retournement horizontal */
25  transform: scaleY(-1);  /* Retournement vertical */
26  transform: scale(-1, -1);  /* Retournement dans les deux sens */
27}

Exemple pratique - zoom au survol :

1.card {
2  transition: transform 0.3s ease;
3}
4
5.card:hover {
6  transform: scale(1.05);  /* Zoom subtil */
7}

3. Rotate - rotation

1/* Rotation en degrés */
2.element {
3  transform: rotate(45deg);   /* 45 degrés dans le sens horaire */
4  transform: rotate(-90deg);  /* 90 degrés dans le sens antihoraire */
5  transform: rotate(180deg);  /* Rotation de 180 degrés */
6}
7
8/* Rotation en radians */
9.element {
10  transform: rotate(1.57rad);  /* ~90 degrés */
11}
12
13/* Rotation en tours (rotations complètes) */
14.element {
15  transform: rotate(0.5turn);  /* Demi-tour (180 degrés) */
16  transform: rotate(2turn);    /* 2 tours complets (720 degrés) */
17}

Exemple pratique - spinner de chargement :

1.spinner {
2  width: 40px;
3  height: 40px;
4  border: 4px solid #f3f3f3;
5  border-top: 4px solid goldenrod;
6  border-radius: 50%;
7  animation: spin 1s linear infinite;
8}
9
10@keyframes spin {
11  from {
12    transform: rotate(0deg);
13  }
14  to {
15    transform: rotate(360deg);
16  }
17}

4. Skew - inclinaison

1/* Incliner horizontalement */
2.element {
3  transform: skewX(15deg);  /* Incliner vers la droite */
4  transform: skewX(-15deg); /* Incliner vers la gauche */
5}
6
7/* Incliner verticalement */
8.element {
9  transform: skewY(10deg);
10}
11
12/* Incliner dans les deux sens */
13.element {
14  transform: skew(15deg, 10deg);  /* X, Y */
15}

Exemple pratique - bouton en parallélogramme :

1.skew-button {
2  transform: skewX(-10deg);
3  background: goldenrod;
4  padding: 12px 30px;
5  color: white;
6  border: none;
7  font-weight: bold;
8}
9
10.skew-button span {
11  display: inline-block;
12  transform: skewX(10deg);  /* Redresser le texte */
13}

Combiner des transformations

Tu peux combiner plusieurs transformations dans une seule déclaration :

1.element {
2  /* L'ordre a son importance ! */
3  transform: translate(100px, 50px) rotate(45deg) scale(1.5);
4
5  /* Ce n'est pas la même chose que : */
6  transform: rotate(45deg) translate(100px, 50px) scale(1.5);
7}

Important : les transformations sont exécutées de droite à gauche (de la fin au début) !

Exemple pratique - animation complexe :

1.card {
2  transition: transform 0.5s ease;
3}
4
5.card:hover {
6  transform: translateY(-10px)  /* D'abord, monter */
7            rotate(2deg)        /* Puis légère rotation */
8            scale(1.05);        /* Enfin, zoom */
9}

Transform-origin - point de référence

Transform-origin indique le point autour duquel les transformations s'effectuent :

1/* Par défaut */
2.element {
3  transform-origin: 50% 50%;  /* Centre (center center) */
4}
5
6/* Différents points */
7.element {
8  transform-origin: top left;     /* Coin supérieur gauche */
9  transform-origin: bottom right; /* Coin inférieur droit */
10  transform-origin: center;       /* Centre */
11  transform-origin: 0 0;          /* Coin supérieur gauche (px) */
12  transform-origin: 100% 0;       /* Coin supérieur droit */
13}

Exemple - rotation autour de différents points :

1.door-left {
2  transform-origin: left center;
3  transition: transform 0.5s;
4}
5
6.door-left:hover {
7  transform: rotateY(90deg);  /* Rotation autour du bord gauche */
8}
9
10.door-right {
11  transform-origin: right center;
12  transition: transform 0.5s;
13}
14
15.door-right:hover {
16  transform: rotateY(-90deg);  /* Rotation autour du bord droit */
17}

Transform 3D

Les transformations 3D ajoutent de la profondeur et de la perspective :

Perspective

La perspective doit être définie sur le parent des éléments 3D :

1.container {
2  perspective: 1000px;  /* Plus la valeur est grande, moins il y a de perspective */
3}
4
5.child {
6  transform: rotateY(45deg);  /* Maintenant tu peux voir l'effet 3D */
7}

Ou sur l'élément lui-même :

1.element {
2  transform: perspective(1000px) rotateY(45deg);
3}

Rotations 3D

1/* Rotation autour de l'axe X (avant-arrière) */
2.element {
3  transform: rotateX(45deg);
4}
5
6/* Rotation autour de l'axe Y (gauche-droite) */
7.element {
8  transform: rotateY(45deg);
9}
10
11/* Rotation autour de l'axe Z (rotation 2D normale) */
12.element {
13  transform: rotateZ(45deg);  /* Identique à rotate(45deg) */
14}
15
16/* Rotation autour d'un axe 3D personnalisé */
17.element {
18  transform: rotate3d(1, 1, 0, 45deg);  /* x, y, z, angle */
19}

Translations 3D

1/* Déplacer en profondeur/vers l'avant */
2.element {
3  transform: translateZ(100px);   /* Vers l'avant */
4  transform: translateZ(-100px);  /* Vers l'arrière */
5}
6
7/* Translate 3D */
8.element {
9  transform: translate3d(100px, 50px, 200px);  /* X, Y, Z */
10}

Transform-style et Backface-visibility

1.container {
2  /* Préserver la 3D pour les enfants */
3  transform-style: preserve-3d;
4
5  /* Ou aplatir en 2D */
6  transform-style: flat;
7}
8
9.card {
10  /* Cacher la face arrière de l'élément */
11  backface-visibility: hidden;
12
13  /* Ou la montrer */
14  backface-visibility: visible;
15}

Exemples pratiques en 3D

1. Carte qui se retourne

1<div class="flip-card">
2  <div class="flip-card-inner">
3    <div class="flip-card-front">
4      <h3>Recto</h3>
5    </div>
6    <div class="flip-card-back">
7      <h3>Verso</h3>
8    </div>
9  </div>
10</div>

1.flip-card {
2  width: 300px;
3  height: 400px;
4  perspective: 1000px;
5}
6
7.flip-card-inner {
8  width: 100%;
9  height: 100%;
10  transition: transform 0.6s;
11  transform-style: preserve-3d;
12  position: relative;
13}
14
15.flip-card:hover .flip-card-inner {
16  transform: rotateY(180deg);
17}
18
19.flip-card-front,
20.flip-card-back {
21  position: absolute;
22  width: 100%;
23  height: 100%;
24  backface-visibility: hidden;
25  display: flex;
26  align-items: center;
27  justify-content: center;
28  border-radius: 10px;
29}
30
31.flip-card-front {
32  background: #3498db;
33  color: white;
34}
35
36.flip-card-back {
37  background: goldenrod;
38  color: white;
39  transform: rotateY(180deg);
40}

2. Cube 3D

1<div class="cube-container">
2  <div class="cube">
3    <div class="cube-face front">Front</div>
4    <div class="cube-face back">Back</div>
5    <div class="cube-face right">Right</div>
6    <div class="cube-face left">Left</div>
7    <div class="cube-face top">Top</div>
8    <div class="cube-face bottom">Bottom</div>
9  </div>
10</div>

1.cube-container {
2  width: 200px;
3  height: 200px;
4  perspective: 800px;
5}
6
7.cube {
8  width: 100%;
9  height: 100%;
10  position: relative;
11  transform-style: preserve-3d;
12  transition: transform 1s;
13  animation: rotate-cube 10s infinite linear;
14}
15
16.cube-face {
17  position: absolute;
18  width: 200px;
19  height: 200px;
20  display: flex;
21  align-items: center;
22  justify-content: center;
23  font-size: 24px;
24  font-weight: bold;
25  color: white;
26  opacity: 0.9;
27}
28
29.front  { background: #3498db; transform: translateZ(100px); }
30.back   { background: #e74c3c; transform: translateZ(-100px) rotateY(180deg); }
31.right  { background: #2ecc71; transform: rotateY(90deg) translateZ(100px); }
32.left   { background: #f39c12; transform: rotateY(-90deg) translateZ(100px); }
33.top    { background: #9b59b6; transform: rotateX(90deg) translateZ(100px); }
34.bottom { background: #1abc9c; transform: rotateX(-90deg) translateZ(100px); }
35
36@keyframes rotate-cube {
37  from {
38    transform: rotateX(0deg) rotateY(0deg);
39  }
40  to {
41    transform: rotateX(360deg) rotateY(360deg);
42  }
43}

3. Effet d'enfoncement d'un bouton 3D

1.button-3d {
2  background: goldenrod;
3  color: white;
4  padding: 15px 30px;
5  border: none;
6  font-size: 18px;
7  font-weight: bold;
8  cursor: pointer;
9  transform: translateZ(0);
10  transition: transform 0.1s;
11  box-shadow: 0 6px 0 #d4920a;
12}
13
14.button-3d:hover {
15  transform: translateY(-2px);
16  box-shadow: 0 8px 0 #d4920a;
17}
18
19.button-3d:active {
20  transform: translateY(4px);
21  box-shadow: 0 2px 0 #d4920a;
22}

Conseils de performance

Accéléré par le GPU (RAPIDE) :

• transform (toutes les fonctions)
• opacity

Lié au CPU (LENT) :

• left, top, right, bottom
• width, height
• margin, padding

Bonnes pratiques :

1/* Lent - provoque un reflow */
2.element:hover {
3  width: 300px;
4  left: 100px;
5}
6
7/* Rapide - accéléré par le GPU */
8.element:hover {
9  transform: translateX(100px) scaleX(1.5);
10}
11
12/* Forcer l'accélération GPU */
13.element {
14  transform: translateZ(0);  /* Astuce GPU */
15  /* ou */
16  will-change: transform;  /* Informer le navigateur */
17}

Récapitulatif

Transform 2D :

• translate - déplacement (X, Y)
• scale - mise à l'échelle
• rotate - rotation
• skew - inclinaison

Transform 3D :

• perspective - profondeur de la scène
• rotateX, rotateY, rotateZ - rotations 3D
• translateZ - déplacement en profondeur/vers l'avant
• transform-style: preserve-3d - préservation de la 3D
• backface-visibility - masquage de la face arrière

Principes clés :

1. Transform n'affecte PAS la disposition
2. Accéléré par le GPU = très rapide
3. L'ordre des transformations a son importance
4. Transform-origin contrôle le point de référence
5. Combine avec transition pour des animations fluides

1* {
2  margin: 0;
3  padding: 0;
4  box-sizing: border-box;
5}
6
7body {
8  font-family: 'Segoe UI', sans-serif;
9  background: linear-gradient(180deg, #1a0a2e, #3d2914);
10  min-height: 100vh;
11  display: flex;
12  justify-content: center;
13  align-items: center;
14  color: white;
15}
16
17.scene {
18  text-align: center;
19  padding: 20px;
20}
21
22h2 {
23  margin-bottom: 30px;
24  color: #f0c040;
25}
26
27.tomb {
28  display: flex;
29  justify-content: center;
30  perspective: 500px;
31}
32
33.sarcophagus {
34  position: relative;
35  width: 200px;
36  height: 300px;
37}
38
39.base {
40  width: 200px;
41  height: 280px;
42  background: linear-gradient(180deg, #d4af37, #b8941e);
43  border-radius: 10px 10px 5px 5px;
44  display: flex;
45  align-items: center;
46  justify-content: center;
47  font-size: 40px;
48  border: 3px solid #8d6e2e;
49  position: absolute;
50  bottom: 0;
51}
52
53.lid {
54  width: 210px;
55  height: 50px;
56  background: linear-gradient(180deg, #c9a84c, #a88932);
57  border-radius: 8px 8px 0 0;
58  display: flex;
59  align-items: center;
60  justify-content: center;
61  font-size: 18px;
62  font-weight: bold;
63  border: 3px solid #8d6e2e;
64  position: absolute;
65  top: 0;
66  left: -5px;
67  transform-origin: top center;
68  /* Ajoute la syntaxe raccourcie animation ici */
69  /* animation: openLid 3s ease-in-out 1s 1 normal forwards; */
70}
71
72/* Définis @keyframes openLid */
73/* @keyframes openLid { */
74/*   0% { transform: rotateX(0deg); } */
75/*   100% { transform: rotateX(-120deg); } */
76/* } */
77
78.hint {
79  margin-top: 30px;
80  color: #aaa;
81  font-style: italic;
82}

Souviens-toi : Transform est comme les sortilèges magiques des prêtres égyptiens - ils peuvent transformer la réalité sans en changer l'essence !