CSS transform 属性

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。

语法:

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

一、旋转 rotate

1、rotate(angle)： 通过指定的角度参数对原元素指定一个2D旋转。

angle是指旋转角度（单位为deg），如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。

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

:::warning
注意：旋转的时候默认以元素中心点为基点进行旋转，可以通过transform-origin属性定义旋转的基点位置
:::

transform-origin属性：定义旋转的基点。

语法：

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

默认值：

transform-origin: 50% 50% 0;

2D的情况下，默认元素的左上角为0% 0%，例如：绕右下角旋转45度

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

**2、rotate3d(x, y, z, angle)**：定义3D旋转

不常用

**3、rotateX(angle)**：定义沿着X轴的3D旋转

transform: rotateX(45deg);

**4、rotateY(angle)**：定义沿着Y轴的3D旋转

transform:rotateY(45deg);

**5、rotateZ(angle)**：定义沿着Z轴的3D旋转

由以下的例子可以看出，Z轴的方向是垂直于window的方向

transform:rotateZ(45deg);

二、移动 translate

1、translate(x, y) ：定义2D移动转化

x 是第一个过渡值参数，y 是第二个过渡值参数选项。如果未被提供，则ty以 0 作为其值。也就是translate(x,y),它表示对象进行平移，按照设定的x,y参数值,当值为负数时，反方向移动物体，其基点默认为元素中心点，也可以根据transform-origin进行改变基点。

例如：

transform:translate(50px,50px):

**2、translate(x)**：指定X轴方向上的一个移动

例如：

transform:translateX(50px):

**3、translate(y)**：指定Y轴方向上的一个移动

例如：

transform:translateY(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);

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

transform-style: preserve-3d;

五、perspective

若是父元素应用了透视perspective xx px, 子元素的transform属性值可为perspective(yy px), yy值越小，则焦距越小，呈现的效果就是类似广角的效果，若值越大，则焦距越远，元素看起来就像在远处一样，一般yy小于xx值，过大的yy值没有太大区别。