什么是3d旋转

#### 3) 旋转

- transform: rotateX(a); 沿着x轴方向旋转

- a 指的是一个旋转角度值，如果为正值，元素围绕X轴顺时针旋转；反之，如果为负值，元素围绕X轴逆时针旋转。

- transform: rotateY(a); 沿着y轴方向旋转

- a 指的是一个旋转角度值，如果为正值，元素围绕Y轴顺时针旋转；反之，如果为负值，元素围绕Y轴逆时针旋转。

- transform: rotateZ(a); 沿着Z轴方向旋转

- a 指的是一个旋转角度值，如果为正值，元素围绕 Z 轴顺时针旋转；反之，如果为负值，元素围绕 Z 轴逆时针

旋转。

- transform: rotate3d(x,y,z,angle);

- 参数：

x：是一个 0 到１之间的数值，主要用来描述元素围绕 X 轴旋转的矢量值。

y：是一个 0 到１之间的数值，主要用来描述元素围绕 Y 轴旋转的矢量值。

z：是一个 0 到１之间的数值，主要用来描述元素围绕 Z 轴旋转的矢量值。

angle：一个角度值，指定在 3D 空间旋转角度，正值顺时针旋转，反之元素逆时。

```css

1、两个值为零，定义X,Y,Z轴旋转

rotate3d(1,0,0,angle) x轴旋转

rotate3d(0,1,0,angle) y轴旋转

rotate3d(0,0,1,angle) z轴旋

/* 沿着x轴方向旋转 */

transform: rotateX(-45deg);

transform: rotate3d(1,0,0,-45deg);

/* 沿着y轴方向旋转 */

transform: rotateY(-45deg);

transform: rotate3d(0,1,0,-45deg);

/* 沿着z轴方向旋转 */

transform: rotateZ(-45deg);

transform: rotate3d(0,0,1,-45deg);

2、两个值不为零，定义多轴旋转

rotate3d(1,0.5,0,30deg)

x 1*30 30deg

y 0.5*30 15deg

z 0*0 0deg

.box5:hover img {

/* z */

transform: rotate3d(.5, 1, 0, 60deg);

/*

x:0.5*60=30deg

y:1*60=60deg

z:0*60=0deg

*/

}

3、三个值不为零，定义多轴旋转

.box6:hover img {

/* z */

transform: rotate3d(.5, 1, 1, 60deg);

/*

x:0.5*60=30deg

y:1*60=60deg

z:1*60=60deg

*/

}

```