Retourne l'heure de levé du soleil pour un jour et un endroit donnés
Apprenez à utiliser la propriété CSS transform pour effectuer des transformations 2D et 3D sur vos éléments HTML. Découvrez la syntaxe, des exemples pratiques et des conseils d'utilisation pour créer des effets visuels impressionnants.
La propriété CSS transform permet d'appliquer des transformations 2D ou 3D aux éléments HTML. Elle est très utile pour effectuer des manipulations visuelles sur les éléments, tels que la rotation, le redimensionnement, la translation, l'inclinaison, etc.
La syntaxe générale de la propriété transform est la suivante :
transform: fonction(valeur);
Valeurs par défaut | none |
---|---|
Inherited: | non |
Animable : | oui En savoir plus sur l'animable |
Version: | CSS3 |
Syntaxe JavaScript: | object.style.transform="rotate(7deg)" |
La fonction spécifie le type de transformation à appliquer, et la valeur détermine les paramètres de la transformation.
Voici quelques exemples pratiques d'utilisation de la propriété transform :
Pour effectuer une rotation de 45 degrés sur un élément :
transform: rotate(45deg);
Exemple : Copier le code
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>La propriété CSS transform</title> <style> .element { display: inline-block; background-color: #0074d9; height: 100px; width: 100px; margin-right: 5px; margin-left: 5px; animation: roll 3s infinite; transform: rotate(30deg); opacity: .7; } @keyframes roll { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } .conteneur { display: flex; align-items: center; justify-content: center; } </style> </head> <body> <h1>La propriété transform CSS avec la fonction css skewX() animée</h1> <div class="conteneur"> <div class="element"> </div> <div class="element"> </div> <div class="element"> </div> </div> </body> </html>
Pour redimensionner un élément à 150% de sa taille initiale :
transform: scale(1.5);
Pour déplacer un élément de 50 pixels vers la droite et 20 pixels vers le bas :
transform: translate(50px, 20px);
Pour incliner un élément de 30 degrés :
transform: skew(30deg);
Exemple : Copier le code
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>La propriété CSS transform</title> <style> .element { display: inline-block; background-color: #0074d9; height: 100px; width: 100px; margin-right: 5px; margin-left: 5px; animation: skew 3s infinite; transform: skew(20deg); animation-direction: alternate; } @keyframes skew { 0% { transform: skewX(20deg); } 100% { transform: skewX(-20deg); } } .conteneur { display: flex; align-items: center; justify-content: center; } </style> </head> <body> <h1>La propriété transform CSS avec la fonction css skewX() animée</h1> <div class="conteneur"> <div class="element"> </div> <div class="element"> </div> <div class="element"> </div> </div> </body> </html>
Pour créer un effet de perspective 3D sur un élément :
transform: perspective(500px);
Il est possible de combiner plusieurs transformations en utilisant la propriété transform. Par exemple, pour effectuer une rotation et une translation simultanément :
transform: rotate(45deg) translate(50px, 20px);
En conclusion, la propriété transform est un outil puissant pour effectuer des transformations visuelles sur les éléments HTML. Elle offre de nombreuses possibilités créatives pour améliorer l'aspect visuel de votre site web. Expérimentez avec les différentes fonctions et valeurs pour obtenir les résultats souhaités.
La plupart des propriétés ci-dessus ont des versions 3D.
translate3d(x, y, z) translateZ(z)
La troisième valeur de translate3d ou la valeur de translateZ rapproche l'élément de l'observateur, les valeurs négatives l'en éloignent.
scale3d(sx, sy, sz) scaleZ(sz)
La troisième valeur de scale3d ou la valeur de scaleZ affecte la mise à l'échelle le long de l'axe z (par exemple, la ligne imaginaire qui sort directement de l'écran).
rotateX(valeur) rotateY(valeur) rotate3d(x, y, z)
rotateX et rotateY font tourner un élément dans l'espace 3D autour de ces axes. rotate3d vous permet de spécifier un point dans l'espace 3D autour duquel faire tourner l'élément.
matrix3d(...)
Une manière de décrire par programme une transformation 3D dans une grille 4×4. Personne n'écrira jamais à la main un de ces programmes, jamais.
Pour les curieux, ceci :
rotate(45deg) translate(24px, 25px)
...peut également être représenté comme suit:
matrix(0.7071067811865475, 0.7071067811865476, -0.7071067811865476, 0.7071067811865475, -0.7071067811865497, 34.648232278140824)
perspective(valeur)
Cette valeur n'affecte pas l'élément lui-même, mais elle affecte les transformations 3D des éléments descendants, ce qui leur permet d'avoir une perspective de profondeur cohérente.
Propriété | |||||
---|---|---|---|---|---|
transform (2D) | 36.0 4.0 -webkit- | 10.0 9.0 -ms- | 16.0 3.5 -moz- | 9.0 3.2 -webkit- | 23.0 15.0 -webkit- 10.5 -o- |
transform (3D) | 36.0 12.0 -webkit- | 12.0 | 10.0 | 9.0 4.0 -webkit- | 23.0 15.0 -webkit- |