À propos de la méthode d'implémentation de la transformation d'attribut de transformation de plan 2D des éléments CSS3

La transformation de forme CSS3 nous permet d'étirer, de mettre à l'échelle, etc.

Dans cet article je parlerai principalement de la transformation plane 2D
attribut trans form peut être transformé
transform signifie transformation
et il est principalement utilisé via la fonction Il existe les fonctions suivantes

• traduire. ( ) Transformation de traduction

• ratate() Transformation de rotation

• scale() Transformation d'échelle

• skew () Transformation oblique

• matrix() Transformation matricielle

la règle d'origine de la transformation définit le centre de la transformation

La transformation de traduction translate

translate() a deux paramètres, le premier est le déplacement relatif de l'axe x, le deuxième paramètre est le déplacement relatif de l'axe y

.demo {    ......
    transform: translate(100px, 200px);  <--
}

ou Translate() peut être divisé en TranslateX() et TranslateY()
(les minuscules Translatex/y sont également acceptables)

.demo {    ......
    transform: translateX(100px) translateY(200px); /*改*/}

Les deux sont équivalents, mais très gênants
Le résultat est que l'élément est traduit de 100px vers la droite et vers le bas Traduit de 200px

Transformation de rotation rotate

rotate() a un paramètre qui représente le 'xxdeg' de l'angle de rotation,
Nombres positifs tournez dans le sens des aiguilles d'une montre, les valeurs négatives sont autorisées

.demo {    ......
    transform: rotate(30deg);}

Le résultat est que l'élément pivote de 30° dans le sens des aiguilles d'une montre
Cependant, le centre de rotation par défaut de l'élément est le centre de l'élément
Pour modifier le centre de transformation, vous pouvez utiliser notre attribut transform-origin
Par exemple, nous voulons faire bouger l'élément le long de la Rotation du sommet supérieur gauche

.demo {    ......
    transform: rotate(30deg);    transform-origin: 0 0; /*增*/}

Les trois paramètres de l'origine de la transformation est la distance sur l'axe x (axe x), la distance sur l'axe y (axe y), la distance sur l'axe z (axe z)
Par défaut La forme est transform-origin: 50% 50% 0;
En plus de la longueur et le pourcentage, les valeurs facultatives de l'axe des x incluent gauche, centre, droite
En plus de la longueur et du pourcentage, les valeurs facultatives de l'axe y incluent également haut , centre, bas
La valeur facultative de l'axe z est uniquement la valeur de longueur, que nous ne pouvons pas utiliser temporairement dans la Transformation 2D

Mise à l'échelle de l'échelle de transformation

La mise à l'échelle d'un élément consiste à modifier la taille de l'élément
Deux paramètres, un grossissement de mise à l'échelle en largeur et en hauteur (sans unité)
Peut également être divisé en scaleX() et scaleY()

.demo {    ......
    transform: scale(2,2);}

Cela double la largeur de l'élément et double la hauteur
Notez qu'il s'agit d'une vraie mise à l'échelle
Cela signifie que s'il y a du texte dans votre élément, cela produira un effet d'étirement
La forme équivalente est la suivante

.demo {    ......
    transform: scaleX(2) scaleY(3); /*改*/}

Vous pouvez modifier le centre de transformation via transform-origin

inclinaison de transformation oblique

inclinaison signifie distorsion oblique
Cette fonction laissera votre élément être déformé linéairement
avec deux paramètres, l'angle de distorsion de l'axe x et de l'axe y, qui sont également sous la forme de xxdeg

.demo {    ......
    transform: skew(10deg,20deg);}

L'équivalent

.demo {    ......
    transform: skewX(10deg) skewY(20deg); /*改*/}

peut aussi être passé transform-origin modifie le centre de transformation, pas besoin d'entrer dans les détails

Matrice de transformation matricielle

Ça a l'air super NB, mais en fait c'est vraiment super NB
La transformation matricielle est moins utilisée, c'est la base de toutes les transformations ci-dessus
Je ne comprends pas très bien
En tant qu'étudiant en mathématiques, j'ai vraiment honte T^T
La transformation matricielle a 6 paramètres, qui peuvent contrôler la rotation, la translation, l'inclinaison et le zoom
Par exemple, le code suivant fait pivoter l'élément de 30° et traduit les axes x et y de 20 px chacun

.demo {    ......
    transform: matrix(0.866,0.5,-0.5,0.866,20,20);}

Si vous êtes intéressé par les mathématiques, je recommande le portail d'articles de Zhang Xinxu

Peut-être que j'écrirai un article sur les matrices sur un coup de tête à l'avenir...

---

Les choses dont je veux parler aujourd'hui sont relativement simple et je n'inclurai pas d'images

Transformation 3DAttributs associés – >Portail

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!