Les transformations CSS

La fonction translate() en CSS fait partie de la famille transform et permet de déplacer un élément le long de l'axe X (horizontal) et/ou Y (vertical) sans affecter les autres éléments. C'est l'une des fonctions les plus utiles pour positionner précisément un élément.

1. Comment utiliser translate en CSS ?

Tu écris la fonction translate() dans la propriété transform ; les navigateurs récents ont aussi une propriété translate distincte, par exemple translate: 50px 100px;. Par exemple :

1div {
2  transform: translate(50px, 100px);
3}

Dans ce cas, le <div> sera déplacé de 50 pixels vers la droite (le long de l'axe X) et de 100 pixels vers le bas (le long de l'axe Y - en CSS, les valeurs positives sur cet axe déplacent l'élément vers le bas).

2. Déplacer le long d'un seul axe

Tu peux aussi déplacer un élément le long d'un seul axe, en utilisant translateX ou translateY. Par exemple :

1/* Déplacer uniquement le long de l'axe X */
2div {
3  transform: translateX(50px);
4}
5
6/* Déplacer uniquement le long de l'axe Y */
7div {
8  transform: translateY(100px);
9}

3. Les pourcentages comme unités

La fonction translate peut aussi accepter des pourcentages comme unités, ce qui permet de déplacer un élément par rapport à sa propre largeur ou hauteur. Par exemple :

1div {
2  transform: translate(10%, 20%);
3}

Ici, l'élément sera déplacé de 10 % de sa largeur et de 20 % de sa hauteur.

4. Combiner avec d'autres transformations

translate peut être combiné avec d'autres transformations, comme rotate, scale et skew, pour obtenir des effets complexes. Par exemple :

1div {
2  transform: translate(50px, 100px) rotate(30deg) scale(1.2);
3}

L'ordre des fonctions compte : inverser translate et rotate donne un autre résultat.

5. Autres transformations

Translate n'est que l'une des nombreuses transformations qui peuvent être appliquées aux éléments HTML. Parmi les autres transformations, on trouve :

scale(sx, sy) : Met à l'échelle un élément, où sx est l'échelle le long de l'axe X et sy le long de l'axe Y. scaleX(sx) : Met à l'échelle un élément uniquement le long de l'axe X. scaleY(sy) : Met à l'échelle un élément uniquement le long de l'axe Y. rotate(angle) : Fait pivoter un élément d'un angle donné, exprimé en degrés (deg), radians (rad), grades (grad) ou tours (turn). skew(x-angle, y-angle) : Incline un élément selon des angles donnés le long des axes X et Y. skewX(angle) : Incline un élément uniquement le long de l'axe X. skewY(angle) : Incline un élément uniquement le long de l'axe Y. matrix(a, b, c, d, e, f) : Permet d'appliquer une transformation à l'aide d'une matrice de transformation 2D. matrix3d(...) : Comme matrix, mais pour les transformations 3D. rotateX(angle) : Fait pivoter un élément autour de l'axe X dans l'espace 3D. rotateY(angle) : Fait pivoter un élément autour de l'axe Y dans l'espace 3D. rotateZ(angle) : Fait pivoter un élément autour de l'axe Z dans l'espace 3D. scale3d(sx, sy, sz) : Met à l'échelle un élément dans l'espace 3D. translate3d(x, y, z) : Déplace un élément dans l'espace 3D. perspective(n) : Applique une perspective à un élément 3D.

Exercice : Les transformations CSS

Dans cet exercice, tu vas apprendre à utiliser différentes transformations CSS pour déplacer, faire pivoter, mettre à l'échelle et incliner les éléments d'une page. Ta tâche sera de créer une page web avec différents éléments qui seront mis en forme à l'aide de transformations CSS.

Étape 1 : Créer la structure de document HTML de base

D'abord, crée un nouveau fichier HTML et ajoute la structure de document HTML de base. Ajoute des éléments <div> avec des classes pour différentes transformations dans le corps du document (<body>).

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Lier le fichier CSS -->
7  <title>Transformations CSS</title>
8</head>
9<body>
10  <h1>Transformations CSS</h1>
11  <div class="box translate">Translate</div>
12  <div class="box translate-x">TranslateX</div>
13  <div class="box translate-y">TranslateY</div>
14  <div class="box rotate">Rotate</div>
15  <div class="box scale">Scale</div>
16  <div class="box skew">Skew</div>
17</body>
18</html>

Étape 2 : Créer le fichier CSS

Ouvre ou crée un nouveau fichier CSS et enregistre-le sous le nom styles.css.

Étape 3 : Mise en forme de base

Ajoute des styles de base pour les éléments <div> afin qu'ils soient visibles sur la page.

1body {
2  display: flex;
3  flex-wrap: wrap;
4  gap: 20px;
5}
6
7.box {
8  width: 100px;
9  height: 100px;
10  background-color: lightblue;
11  display: flex;
12  align-items: center;
13  justify-content: center;
14  text-align: center;
15  font-size: 14px;
16  font-weight: bold;
17  margin: 20px;
18}

Étape 4 : La transformation translate

Ajoute un style pour la classe .translate afin de déplacer l'élément le long des deux axes.

1/* Transformation translate */
2.translate {
3  transform: translate(50px, 100px);
4}

Étape 5 : La transformation translateX

Ajoute un style pour la classe .translate-x afin de déplacer l'élément uniquement le long de l'axe X.

1/* Transformation translateX */
2.translate-x {
3  transform: translateX(50px);
4}

Étape 6 : La transformation translateY

Ajoute un style pour la classe .translate-y afin de déplacer l'élément uniquement le long de l'axe Y.

1/* Transformation translateY */
2.translate-y {
3  transform: translateY(50px);
4}

Étape 7 : La transformation rotate

Ajoute un style pour la classe .rotate afin de faire pivoter l'élément.

1/* Transformation rotate */
2.rotate {
3  transform: rotate(45deg);
4}

Étape 8 : La transformation scale

Ajoute un style pour la classe .scale afin de mettre l'élément à l'échelle.

1/* Transformation scale */
2.scale {
3  transform: scale(1.5);
4}

Étape 9 : La transformation skew

Ajoute un style pour la classe .skew afin d'incliner l'élément.

1/* Transformation skew */
2.skew {
3  transform: skew(20deg, 10deg);
4}

Résultat

Une fois toutes les étapes terminées, tes fichiers HTML et CSS devraient ressembler à ceci :

Fichier HTML (index.html)

Toute la page de l'étape 1, sans changement :

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Lier le fichier CSS -->
7  <title>Transformations CSS</title>
8</head>
9<body>
10  <h1>Transformations CSS</h1>
11  <div class="box translate">Translate</div>
12  <div class="box translate-x">TranslateX</div>
13  <div class="box translate-y">TranslateY</div>
14  <div class="box rotate">Rotate</div>
15  <div class="box scale">Scale</div>
16  <div class="box skew">Skew</div>
17</body>
18</html>

Fichier CSS (styles.css)

Toutes les règles des étapes 3 à 9 dans un seul fichier :

1body {
2  display: flex;
3  flex-wrap: wrap;
4  gap: 20px;
5}
6
7.box {
8  width: 100px;
9  height: 100px;
10  background-color: lightblue;
11  display: flex;
12  align-items: center;
13  justify-content: center;
14  text-align: center;
15  font-size: 14px;
16  font-weight: bold;
17  margin: 20px;
18}
19
20/* Transformation translate */
21.translate {
22  transform: translate(50px, 100px);
23}
24
25/* Transformation translateX */
26.translate-x {
27  transform: translateX(50px);
28}
29
30/* Transformation translateY */
31.translate-y {
32  transform: translateY(50px);
33}
34
35/* Transformation rotate */
36.rotate {
37  transform: rotate(45deg);
38}
39
40/* Transformation scale */
41.scale {
42  transform: scale(1.5);
43}
44
45/* Transformation skew */
46.skew {
47  transform: skew(20deg, 10deg);
48}

Pour aller plus loin

1. Ajoute davantage d'éléments avec différentes transformations pour mieux comprendre comment fonctionnent les différentes transformations.
2. Essaie d'ajouter davantage de styles à ta page, par exemple en changeant les couleurs, les tailles et d'autres propriétés CSS.
3. Teste tes compétences en créant des effets plus complexes à l'aide de différentes combinaisons de transformations.

Après avoir terminé cet exercice, tu devrais mieux comprendre comment utiliser différentes transformations CSS pour déplacer, faire pivoter, mettre à l'échelle et incliner les éléments d'une page.