Que sont les transformations CSS3

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.

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度*/

Transformation--twist skew()

div.box{transform:skew(45deg);} 
/*通过skew（）函数将长方形变成平行四边形。*/

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);}

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。  */

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方向就是上下
*/

Transformation--Origine transformation-origine

div.box{transform-origin: left top;transform: rotate(45deg); }

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!