Que signifie transformer en CSS ?-Questions et réponses frontales-php.cn

Que signifie transformer en CSS ?

青灯夜游

Libérer： 2022-09-21 17:23:27

original

6054 Les gens l'ont consulté

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.

Que signifie transformer en CSS ?

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;

Copier après la connexion

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

Que signifie transformer en CSS ?

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度Copier après la connexion

Que signifie transformer en CSS ?

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;

Copier après la connexion

Valeur par défaut :

transform-origin: 50% 50% 0;

Copier après la connexion

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

Copier après la connexion

Que signifie transformer en CSS ? 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);

Copier après la connexion

Que signifie transformer en CSS ? 4. rotateY(angle)

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

transform:rotateY(45deg);

Copier après la connexion

Que signifie transformer en CSS ? 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);

Copier après la connexion

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):

Copier après la connexion

Que signifie transformer en CSS ? 2. translation(x)

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

Par exemple :

transform:translateX(50px):

Copier après la connexion

Que signifie transformer en CSS ?

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);Copier après la connexion

Que signifie transformer en CSS ?

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

transform-origin: 100% 100%;transform: scale(0.7, 0.3);Copier après la connexion

Que signifie transformer en CSS ?

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

transform: scaleX(0.7)Copier après la connexion

1Que signifie transformer en CSS ?

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

transform: scaleY(0.7)Copier après la connexion

Que signifie transformer en CSS ?

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);Copier après la connexion

1Que signifie transformer en CSS ?

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

transform-origin: 100% 100%;transform: skew(10deg,10deg);Copier après la connexion

1Que signifie transformer en CSS ?

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

transform: skewX(10deg);Copier après la connexion

1Que signifie transformer en CSS ?

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

transform: skewY(10deg);Copier après la connexion

1Que signifie transformer en CSS ?

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

transform-style: preserve-3d;

Copier après la connexion

（学习视频分享：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!