1.1 Propriété transform
Les transformations CSS permettent de modifier la position, la taille, la rotation et l'inclinaison des éléments sans changer leur flux normal dans le document. C'est un outil puissant pour créer des interfaces web interactives et dynamiques. Jetons un œil aux bases des transformations en utilisant les propriétés transform, translate, rotate, scale et skew.
La propriété transform permet d'appliquer des transformations 2D et 3D aux éléments. Elle combine différentes fonctions de transformation, telles que translate, rotate, scale et skew.
Syntaxe :
element {
transform: transformation-function;
}
Où :
transformation-function: fonction de transformation appliquée à l'élément
Exemple d'utilisation :
.element {
transform: translate(50px, 100px);
}
1.2 Transformation translate
La transformation translate est utilisée pour déplacer un élément sur l'axe X et/ou Y.
Syntaxe :
element {
transform: translate(x, y);
}
Où :
x: décalage sur l'axe X (peut être négatif ou positif)y: décalage sur l'axe Y (peut être négatif ou positif)
Exemple :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transformation translate</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: transform 0.5s;
}
.box:hover {
transform: translate(50px, 50px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Explication du code :
.box: élément avec des dimensions et une couleur fixes.box:hover: au survol, la transformationtranslate(50px, 50px)est appliquée, déplaçant l'élément de 50 pixels vers la droite et vers le bas
1.3 Transformation rotate
La transformation rotate est utilisée pour tourner un élément autour de son centre.
Syntaxe :
element {
transform: rotate(angle);
}
Où :
angle: angle de rotation en degrés (peut être négatif ou positif)
Exemple :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transformation rotate</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
transition: transform 0.5s;
}
.box:hover {
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Explication du code :
.box: élément avec des dimensions et une couleur fixes.box:hover: au survol, la transformationrotate(45deg)est appliquée, tournant l'élément de 45 degrés dans le sens horaire
1.4 Transformation scale
La transformation scale est utilisée pour modifier la taille d'un élément sur l'axe X et/ou Y.
Syntaxe :
element {
transform: scale(sx, sy);
}
Où :
sx: échelle sur l'axe X (valeur supérieure à 1 agrandit l'élément, inférieure à 1 le réduit)sy: échelle sur l'axe Y (valeur supérieure à 1 agrandit l'élément, inférieure à 1 le réduit)
Exemple :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transformation scale</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
transition: transform 0.5s;
}
.box:hover {
transform: scale(1.5, 1.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Explication du code :
.box: élément avec des dimensions et une couleur fixes-
.box:hover: au survol, la transformationscale(1.5, 1.5)est appliquée, augmentant sa taille de 1.5 fois sur les deux axes
1.5 Transformation skew
La transformation skew est utilisée pour incliner un élément sur l'axe X et/ou Y.
Syntaxe :
element {
transform: skew(ax, ay);
}
Où :
ax: angle d'inclinaison sur l'axe X (peut être négatif ou positif)ay: angle d'inclinaison sur l'axe Y (peut être négatif ou positif)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transformation skew</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #9b59b6;
transition: transform 0.5s;
}
.box:hover {
transform: skew(20deg, 10deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Explication du code :
.box: élément avec des dimensions et une couleur fixes..box:hover: au survol, la transformationskew(20deg, 10deg)est appliquée, inclinant l'élément de 20 degrés sur l'axe X et de 10 degrés sur l'axe Y.
1.6 Combinaison de différentes transformations
La propriété transform permet de combiner plusieurs fonctions de transformation pour créer des effets complexes.
Exemple :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transformations combinées</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: transform 0.5s;
}
.box:hover {
transform: translate(50px, 50px) rotate(45deg) scale(1.5) skew(20deg, 10deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Explication du code :
.box: élément avec des dimensions et une couleur fixes.box:hover: au survol, les transformationstranslate,rotate,scaleetskewsont appliquées simultanément, créant un effet complexe
GO TO FULL VERSION