Vidéo: [CSS3] Les transitions 2025
CSS3 inclut la possibilité d'appliquer des transformations géométriques sur n'importe quel élément de votre page Web HTML5. Cela fournit un niveau de contrôle visuel remarquable qui n'était pas auparavant disponible pour les développeurs Web.
L'attribut transform vous permet d'appliquer une transformation mathématique à n'importe quel div. Lorsque vous appliquez la transformation à un élément, vous devez appliquer un ou plusieurs des paramètres suivants pour décrire le type de transformation:
-
translate : Déplace l'objet de sa position par défaut. La traduction nécessite deux paramètres, une mesure X et une mesure Y. Utilisez les unités de mesure CSS standard.
-
faire pivoter : Fait pivoter l'image autour de sa valeur centrale. Prend un paramètre, une mesure d'angle en degrés. (Par exemple, 30 degrés est 30deg.)
-
échelle : Modifie la taille de l'objet. La version standard change uniformément la taille horizontale et verticale. Les attributs scalex et scaley peuvent être utilisés pour ajuster l'échelle le long d'un axe individuel. L'échelle est mesurée dans les unités de mesure CSS standard. Si l'échelle est supérieure à 1, l'objet est plus grand que l'original. Une échelle entre zéro et un rend l'article plus petit que ce qu'il était.
-
biais : Ceci vous permet d'incliner l'élément d'un certain angle. Le paramètre nécessite une mesure d'angle en degrés. Les variations skewx et skewy permettent un contrôle plus complet de la transformation.
Vous pouvez combiner plusieurs paramètres en les listant après l'attribut transform séparé par des espaces.
Pour illustrer, imaginons l'extrait HTML suivant:
boîte 1 boîte 2 boîte 3 boîte 4 boîte 5
Le code montre cinq divs identiques. À des fins d'illustration, tous les divs partagent le même CSS commun:
# box1, # box2, # box3, # box4, # box5 {largeur: 100px; hauteur: 80px; bordure: 3px noir uni; background-color: yellow;}
Appliquez des variantes de l'attribut à chaque élément pour voir comment les transformations fonctionnent.
# box2 {transformation: translate (100px, 0px);} # box3 {transformation: rotate (45deg);} # case4 {transformation: échelle (2) translate (100px, 0px);} # box5 {transformation: skew (3);}
Notez que le support du navigateur change sur cet élément. Chrome et Safari attendent toujours le préfixe -webkit, mais Firefox et Opera prennent en charge la version non préfixée. IE 10 fonctionne théoriquement avec la version standard, mais la version 9 requiert le préfixe -ms-, et les versions antérieures d'IE ignorent tout simplement les transformations. Si vous affichez le code source réel de la transformation.site html, vous verrez plusieurs versions pour gérer les différents navigateurs:
# box2 {transformer: translate (100px, 0px); -webkit-transform: translate (100px, 0px); -ms-transform: translate (100px, 0px);}
Finalement, le bon sens éclatera et les préfixes spécifiques au fournisseur ne seront plus nécessaires, mais pour le moment, il est plus sûr de les mettre tous en place. Si vous voulez récupérer les anciennes versions de Firefox et Opera, vous pouvez également inclure ces préfixes (-moz- et -o-).
