Étapes d'implémentation pertinentes des propriétés de déformation dans CSS3

On sait que l'attribut transform en CSS3 permet à l'élément de changer de forme entre la 2D et la 3D, puis aujourd'hui nous allons parler de la attribut de déformation en CSS3.

Attribut Transform, le changement CSS3 le plus important. Laissez les éléments changer de forme en 2D et 3D.

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;

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

Déformation 3D

En 2013, Google a lancé Chrome36, annonçant officiellement CSS Nous sommes entrés 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 crois qu'après avoir lu l'introduction ci-dessus, vous maîtrisez les connaissances sur la déformation. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture connexe :

Étapes à mettre en œuvre à l'aide de CSS3 pour créer une bordure carrée qui brille progressivement

HTML nécessite une vérification de compatibilité Quoi les navigateurs sont

Explication détaillée et exemples d'utilisation de l'attribut word-wrap 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!