4 fonctions implémentées par l'attribut transform en CSS3 (rotation, mise à l'échelle, inclinaison et déplacement)

Ce que cet article vous apporte concerne les quatre fonctions (rotation, mise à l'échelle, inclinaison et mouvement) implémentées par l'attribut transform dans CSS3. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. ça aide.

1 attribut de transformation

En CSS3, vous pouvez utiliser la fonction de transformation pour réaliser quatre types de déformation : rotation, mise à l'échelle, inclinaison et mouvement du texte ou des images à traiter.

(1) Prise en charge du navigateur

Jusqu'à présent : les navigateurs Safari 3.1 ou supérieur, Chrome 8 ou supérieur, Firefox 4 ou supérieur, Opera 10 ou supérieur prennent en charge cet attribut.

2 Rotation

Utilisez la méthode de rotation et ajoutez la valeur de l'angle au paramètre. La valeur de l'angle est suivie du texte "deg" indiquant l'angle. Rotation de l'unité La direction est dans le sens des aiguilles d'une montre.

transform：rotate（45deg）；

3 Zoom

Utilisez la méthode de mise à l'échelle pour implémenter la mise à l'échelle du texte ou des images et spécifiez le rapport de mise à l'échelle dans les paramètres.

transform：scale（0.5）；//缩小一半

(1) Vous pouvez spécifier séparément le grossissement horizontal et le grossissement vertical de l'élément

transform：scale（0.5，2）；//水平方向缩小一半，垂直方向放大一倍。

4 Inclinaison

Utilisez le méthode d'inclinaison pour implémenter le traitement d'inclinaison du texte ou des images, et spécifier l'angle d'inclinaison dans la direction horizontale et l'angle d'inclinaison dans la direction verticale dans les paramètres.

transform：skew（30deg，30deg）；//水平方向上倾斜30度，垂直方向上倾斜30度。

(1) N'utiliser qu'un seul paramètre et omettre l'autre paramètre

Dans ce cas, il est considéré comme une inclinaison uniquement dans le sens horizontal et non dans le sens vertical.

transform：skew（30deg）；

5 Déplacer

Utilisez la méthode de traduction pour déplacer du texte ou des images, et spécifiez la distance de déplacement dans le sens horizontal et la distance de déplacement dans le sens vertical dans les paramètres.

transform：translate（50px，50px）；// 水平方向上移动50px，垂直方向上移动50px

(1) N'utiliser qu'un seul paramètre et omettre l'autre paramètre

Dans ce cas, il est considéré comme se déplaçant uniquement dans le sens horizontal et non dans le sens vertical.

transform：translate（50px）；

6 Utiliser plusieurs méthodes de déformation pour un élément

transform：translate（150px，200px） rotate（45deg） scale（1.5）；

7 Spécifier le point de base de la déformation

Lorsque vous utilisez la méthode de transformation pour transformer du texte ou des images, le point central de l'élément est utilisé comme point de référence pour la transformation.

attribut transform-origin

En utilisant cet attribut, vous pouvez modifier le point de base de la déformation.

transform：rotate（45deg）；
transform-origin：left bottom；//把基准点修改为元素的左下角

(1) Préciser la valeur de l'attribut

La position du point de référence dans la direction horizontale de l'élément : gauche, centre, droite

La position de le point de référence dans la direction verticale de l'élément Position : haut, centre, bas

8 Fonction de déformation 3D

(1) Rotation

à l'aide Méthode rotateX, méthode rotateY, méthode rotateZ respectivement. L'élément tourne autour de l'axe X, de l'axe Y et de l'axe Z. Ajoutez la valeur d'angle au paramètre. La valeur d'angle est suivie du texte deg indiquant l'unité d'angle. Le sens de rotation est dans le sens des aiguilles d'une montre.

transform：rotateX（45deg）；
transform：rotateY（45deg）；
transform：rotateZ（45deg）；
transform：rotateX（45deg） rotateY（45deg） rotateZ（45deg）；
transform：scale（0.5） rotateY（45deg） rotateZ（45deg）；

(2) Mise à l'échelle

Utilisez respectivement la méthode scaleX, la méthode scaleY et la méthode scaleZ pour mettre à l'échelle l'élément en fonction de l'axe X, de l'axe Y et de l'axe Z. et spécifiez le rapport de mise à l'échelle dans les paramètres.

transform：scaleX（0.5）；
transform：scaleY（1）；
transform：scaleZ（2）；
transform：scaleX（0.5）scaleY（1）；
transform：scale（0.5） rotateY（45deg）；

(3) Inclinaison

Utilisez respectivement la méthode skewX et la méthode skewY pour incliner l'élément dans le sens des aiguilles d'une montre sur l'axe X et l'axe Y (pas de méthode skewZ), spécifiés dans les paramètres Angle d'inclinaison

transform：skewX（45deg）；
transform：skewY（45deg）；

(4) Déplacer

en utilisant respectivement la méthode TranslateX, la méthode TranslateY et la méthode TranslateZ pour déplacer l'élément dans l'axe X, l'axe Y, et les directions de l'axe Z. Ajoutez la distance de mouvement aux paramètres.

transform：translateX（50px）;
transform：translateY（50px）;
transform：translateZ（50px）;

9 Matrice de transformation

Il existe une matrice correspondante derrière chaque méthode de déformation.

(1) Calculer la déformation 2D (3, b, c, d, e, f), a ~ f représentent tous un nombre, utilisé pour décider comment effectuer le traitement de déformation.

(2) Traduction de la matrice 2D

             

(3) Calculer la déformation 3D

Matrice 4X4 utilisée pour la déformation à l'échelle 3D

//效果一致：右移150px，下移150px
transform：matrix（1，0,0,1，150，150）；
transform：translate（150px，150px）；

🎜>

    

transform:matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1);

//效果一致：X轴方向上缩小五分之一，Y轴方向上缩小一半。
transform:scale3d(0.8,0.5,1);
transform:matrix3d(0.8,0,0,0,0,0.5,0,0,0,0,1,0,0,0,0,1);

（4）可通过矩阵执行多重变形处理

将需要的变形矩阵相乘得到一个新的变形矩阵可实现该处理。

相关推荐：

CSS3的transform属性_html/css_WEB-ITnose

CSS3的属性transition、animation、transform

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!