Que signifie transformer en CSS ?

En CSS, transformation signifie changement et déformation. Il est principalement utilisé pour définir le changement de forme des éléments et réaliser une conversion 2D ou 3D des éléments ; cet attribut peut être utilisé en conjonction avec des valeurs d'attribut (fonctions de transformation) pour faire pivoter et déformer les éléments. inclinaison, mise à l'échelle, translation mobile et matrice de déformation matricielle.

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

Transform signifie littéralement transformation, ce qui signifie changement. C'est un nouvel attribut de CSS3. Il est utilisé pour définir le changement de forme des éléments et réaliser une transformation 2D ou 3D des éléments.

En CSS3, la transformation comprend principalement les types suivants : rotation, distorsion, inclinaison, mise à l'échelle et traduction et matrice de transformation matricielle.

Grammaire :

transform: none|transform-functions;即：transform: rotate | scale | skew | translate |matrix;

où aucun signifie aucune transformation, fonctions de transformation signifie une ou plusieurs fonctions de transformation, séparées par des espaces

1. Rotation rotation

1. : Spécifiez une rotation 2D par rapport à l'élément d'origine via le paramètre d'angle spécifié.

angle fait référence à l'angle de rotation (unité : deg). Si la valeur définie est un nombre positif, cela signifie une rotation dans le sens des aiguilles d'une montre. Si la valeur définie est un nombre négatif, cela signifie une rotation dans le sens inverse des aiguilles d'une montre.

transform: rotate(45deg);  //顺时针旋转30度

Remarque : lors de la rotation, le point central de l'élément est utilisé par défaut comme point de base. Vous pouvez définir la position du point de base de la rotation via l'attribut transform-origin. Attribut d'origine : Définit le point de base de la rotation.

Syntaxe :

transform-origin: x-axis y-axis z-axis;

Valeur par défaut :

transform-origin: 50% 50% 0;

Dans le cas de la 2D, le coin supérieur gauche de l'élément par défaut est 0% 0%, par exemple : faites pivoter de 45 degrés autour du coin inférieur droit

transform-origin: 100% 100%;transform: rotate(45deg);

2. rotate3d(x, y, z, angle)

 : Définir la rotation 3D

Pas couramment utilisé

3. rotateX(angle)

 : Définir la rotation 3D le long de l'axe X

transform: rotateX(45deg);

4. rotateY(angle)

 : Définir la rotation 3D le long de l'axe Y

transform:rotateY(45deg);

rotationZ(angle)

 : Définir la rotation 3D le long de l'axe Z

Comme possible. Comme le montre l'exemple suivant, la direction de l'axe Z est perpendiculaire à la direction de la fenêtre

transform:rotateZ(45deg);

2. Mobile Translate

1 Translate(x, y)

 : Définir la transformation mobile 2D

x est le premier paramètre de valeur de transition, y est la deuxième option de paramètre de valeur de transition. S’il n’est pas fourni, ty a 0 comme valeur. Autrement dit, translation(x,y), ce qui signifie que l'objet est déplacé en fonction de la valeur du paramètre x, y définie. Lorsque la valeur est un nombre négatif, l'objet est déplacé dans la direction opposée. Le point de base est par défaut le. point central de l'élément. Il peut également être basé sur l'origine de la transformation. Effectuer un changement de point de base.

Par exemple :

transform:translate(50px,50px):

2. translation(x)

 : Spécifiez un mouvement dans la direction de l'axe Y

Par exemple :

transform:translateX(50px):

4、translate3d(x, y, z)：定义3D移动转换

5、translateZ(z)：指定Z轴方向上的一个移动

三、缩放 scale

1、scale(x, y)：定义2D缩放转换。

X表示水平方向缩放的倍数，Y表示垂直方向的缩放倍数，而Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。例如：

transform: scale(0.7, 0.3);

可以通过transform-origin对元素的基点进行设置，同样基点在元素中心位置；例如：

transform-origin: 100% 100%;transform: scale(0.7, 0.3);

2、scaleX(x)：在X轴方向进行缩放转换

transform: scaleX(0.7)

3、scaleY(y)：在Y轴方向进行缩放转换

transform: scaleY(0.7)

4、scale3d：(x, y, z)：定义3D缩放转换

5、scaleZ(z)：在Z轴方向进行缩放转换

四、扭曲 skew

1、skew(x-angle, y-angle) ：定义沿着 X 和 Y 轴的 2D 倾斜转换。

skew是用来对元素进行扭曲变行，第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。其中第二个参数是可选参数，如果没有设置第二个参数，那么Y轴为0deg。：

transform: skew(10deg,10deg);

同样是以元素中心为基点，我们也可以通过transform-origin来改变元素的基点位置。例如

transform-origin: 100% 100%;transform: skew(10deg,10deg);

2、skewX(angle)：定义沿着 X 轴的 2D 倾斜转换

transform: skewX(10deg);

3、skewY(angle)：定义沿着 Y轴的 2D 倾斜转换

transform: skewY(10deg);

注意：如果要实现3D效果，需要将transform-style属性设置为preserve-3d，即

transform-style: preserve-3d;

（学习视频分享：web前端）

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!

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