3.1 Bases des transformations combinées
Le CSS offre la possibilité de combiner plusieurs transformations pour créer des effets visuels complexes. Ces transformations peuvent inclure translate, rotate, scale et skew, qui peuvent être regroupées en une seule propriété transform.
La propriété transform peut contenir plusieurs fonctions de transformation, séparées par des espaces. Elles seront appliquées dans l'ordre où elles sont spécifiées. Comprendre comment les différentes transformations interagissent entre elles est essentiel pour créer des animations et des effets complexes.
Syntaxe :
element {
transform: function1() function2() ... functionN();
}
Exemple :
element {
transform: translate(20px, 20px) rotate(45deg) scale(1.5) skew(10deg, 5deg);
}
Translation et rotation
Dans cet exemple, l'élément est déplacé de 50 pixels à droite et de 50 pixels vers le bas, puis tourne de 45 degrés.
Exemple :
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Translation et rotation</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transform: translate(50px, 50px) rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Explication du code :
.box: l'élément est d'abord déplacé de 50 pixels à droite et vers le bas, puis tourne de 45 degrés dans le sens des aiguilles d'une montre
3.2 Analyse des différentes combinaisons
1. Mise à l'échelle et inclinaison
Dans cet exemple, l'élément est mis à l'échelle de 1,5 fois sur les deux axes, puis incliné de 20 degrés sur l'axe X et de 10 degrés sur l'axe Y.
Exemple :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mise à l'échelle et inclinaison</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
transform: scale(1.5) skew(20deg, 10deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Explication du code :
.box: l'élément est d'abord mis à l'échelle de 1,5 fois sur les deux axes, puis incliné de 20 degrés sur l'axe X et de 10 degrés sur l'axe Y
2. Translation, rotation et mise à l'échelle
Dans cet exemple, l'élément est déplacé de 100 pixels à droite, tourne de 30 degrés et est mis à l'échelle de 2 fois sur l'axe X et de 1,5 fois sur l'axe Y.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Translation, rotation et mise à l'échelle</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
transform: translate(100px, 0) rotate(30deg) scale(2, 1.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Explication du code :
-
.box: l'élément est d'abord déplacé de 100 pixels à droite, puis tourne de 30 degrés et est mis à l'échelle de 2 fois sur l'axe X et de 1,5 fois sur l'axe Y
3.3 Impact de l'ordre des transformations
Lorsque plusieurs transformations sont combinées, il est important de comprendre qu'elles sont appliquées dans l'ordre. Cela signifie que chaque transformation suivante influencera le résultat de la précédente.
Dans cet exemple, nous montrons comment changer l'ordre des transformations affecte le résultat final.
Exemple A : d'abord rotation, puis translation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D'abord rotation, puis translation</title>
<style>
.box-a {
width: 100px;
height: 100px;
background-color: #3498db;
transform: rotate(45deg) translate(50px, 50px);
}
</style>
</head>
<body>
<div class="box-a"></div>
</body>
</html>
Exemple B : d'abord translation, puis rotation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D'abord translation, puis rotation</title>
<style>
.box-b {
width: 100px;
height: 100px;
background-color: #e74c3c;
transform: translate(50px, 50px) rotate(45deg);
}
</style>
</head>
<body>
<div class="box-b"></div>
</body>
</html>
Explication du code :
-
.box-a: l'élément est d'abord tourné de 45 degrés, puis déplacé de 50 pixels à droite et vers le bas, ce qui fait que l'élément se déplace en diagonale à partir de sa nouvelle position après la rotation -
.box-b: l'élément est d'abord déplacé de 50 pixels à droite et vers le bas, puis tourne de 45 degrés, ce qui fait que l'élément tourne par rapport à sa nouvelle position
GO TO FULL VERSION