Tutoriel sur l'utilisation de l'attribut transform en CSS3

Cette fois, parlons de l'attribut transform, qui est l'attribut CSS3 le plus important qui modifie les caractéristiques de la forme, permettant à l'élément de changer d'avant en arrière entre 2D et 3D.

1. Déformation 2D

deg représente le degré, l'unité ne peut pas être inférieure, il n'y a que l'unité deg, pas d'autres unités.

rotate(angle) spécifie l'angle dans le paramètre

skew(x-angle,y-angle) Transformation d'inclinaison 2D le long des axes X et Y.

skewX(angle) Transformation d'inclinaison 2D le long de l'axe X.

skewY(angle) Transformation d'inclinaison 2D le long de l'axe Y.

scale(x,y)

Une transformation de mise à l'échelle 2D le long des axes X et Y. Supérieur à 1 : agrandir, 0~1 : réduire.

scaleX(x) définit la valeur de l'axe X pour définir la transformation de mise à l'échelle.

scaleY(y) définit la valeur de l'axe Y pour définir la transformation de mise à l'échelle.

Remarque :

Aucune transformation : transform:none;

Plusieurs transformations sont séparées par des espaces. ef: transform:scale(0.5) skew(10deg,20deg) rotate(30deg);

2. Déformation 3D

En 2013, Google a lancé Chrome36, officiellement Annoncé que CSS est entré dans l'ère de la 3D.

translate3d(x,y,z) Traduction 3D le long des axes X, Y et Z.

traduire le mouvement spatial

conversion traduireX(x), utilisez simplement la valeur de l'axe X.

conversion translationY(y), utilisez simplement la valeur de l'axe Y.

translateZ(z) Conversion 3D, en utilisant simplement la valeur de l'axe Z.

rotate3d(x,y,z,angle) Rotation 3D le long des axes X, Y et Z.

rotation rotation

rotateX(angle) Rotation 3D le long de l'axe X.

rotateY(angle) Rotation 3D le long de l'axe Y.

rotateZ(angle) Rotation 3D le long de l'axe Z.

perspective(n) définit la perspective view (profondeur de champ) pour l'élément de transformation 3D.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP. !

Lecture connexe :

Introduction détaillée à l'attribut border-image en CSS3

Utilisez JS et HTML pour créer un Code de planche à dessin simple

Tutoriel sur l'utilisation de l'attribut word-break en CSS3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!