Maison > interface Web > tutoriel CSS > Que sont les transformations CSS3

Que sont les transformations CSS3

青灯夜游
Libérer: 2021-12-15 14:31:55
original
2482 Les gens l'ont consulté

La déformation CSS3 fait référence à l'utilisation de l'attribut transform pour effectuer une rotation, une distorsion, une mise à l'échelle, un déplacement, une matrice, une origine et d'autres types de traitement de déformation sur les éléments ; l'opération de déformation des éléments nécessite l'utilisation de rotate(), skew(), scale ; (), Translate (), Matrix() et d'autres fonctions à réaliser.

Que sont les transformations CSS3

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Qu'est-ce que la transformation CSS3

En CSS3, vous pouvez utiliser la fonction de transformation pour réaliser six types de traitement de transformation : la rotation, la distorsion, la mise à l'échelle, le déplacement, la matrice et l'origine du texte ou des images. La transformation sera expliquée. en détail ci-dessous sur l'utilisation.

Transformation--rotate rotate()

div.box{transform: rotate(45deg);} /*顺时针旋转45度*/
Copier après la connexion

Transformation--twist skew()

div.box{transform:skew(45deg);} 
/*通过skew()函数将长方形变成平行四边形。*/
Copier après la connexion

Skew() a trois situations :

1. skew(x,y) rend l'élément horizontal et directions verticales en même temps (les axes X et Y sont tordus et déformés en même temps selon une certaine valeur d'angle)

2. skewX(x) provoque uniquement la torsion et la déformation de l'élément dans le sens); direction horizontale (l'axe X est tordu et déformé)

3. skewY (y) Déformez uniquement l'élément dans la direction verticale (distorsion de l'axe Y)

Transformation--Échelle d'échelle()

div.box{transform: scale(1.5,0.5);}
Copier après la connexion

L'échelle d'échelle a trois situations :

1. scale(X,Y) fait que l'élément évolue dans les directions horizontale et verticale en même temps (c'est-à-dire l'échelle des axes X et Y en même temps)

2. L'élément scaleX(x) évolue uniquement dans la direction horizontale (mise à l'échelle de l'axe X)

3. L'élément scaleY(y) évolue uniquement dans la direction verticale (mise à l'échelle de l'axe Y)

La valeur par défaut de scale () est 1. Lorsque la valeur est définie sur une valeur comprise entre 0,01 et 0,99, l'effet est de réduire la taille d'un élément ; et toute valeur supérieure ou égale à 1,01 est utilisée pour réduire la taille d'un élément. Les éléments sont agrandis.

Déformation--Déplacement translation()

div.box{transform: translate(50px,100px);}  
/*  通过translate()函数将元素向Y轴下方移动50px,X轴右方移动100px。  */
Copier après la connexion

translate Nous pouvons le diviser en trois situations :

1. translation(x,y) se déplace dans les directions horizontale et verticale en même temps (c'est-à-dire le L'axe X et l'axe Y se déplacent en même temps)

2. TranslateX(x) ne se déplace que dans le sens horizontal (mouvement sur l'axe X)

3. TranslateY(Y) ne se déplace que dans le sens vertical (axe Y) mouvement)

Transformation--matrice matrice ()

div.box{transform: matrix(1,0,0,1,100,100);}  /*
    matrix() 6个属性的意思的:第一个宽度比例1就是原大小,
第二个是上下倾斜1就是2倍,2就是3倍,0就是不倾斜
第三个是左右倾斜,数字和第二个一样的意思,
第四个是高度比例1就是原大小,
第五个是X方向的像素位移,X方向就是左右,
第六个是Y方向的像素位移,X方向就是上下
*/
Copier après la connexion

Transformation--Origine transformation-origine

div.box{transform-origin: left top;transform: rotate(45deg); }
Copier après la connexion

Changez l'origine de l'élément dans le coin supérieur gauche, puis faites-le pivoter de 45 degrés dans le sens des aiguilles d'une montre.

(Partage vidéo d'apprentissage : Tutoriel vidéo CSS)

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal