3d旋转，_roteta3d属性多个角度旋转-CSDN博客

本文链接：https://blog.csdn.net/kxl3576814022/article/details/126347680

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

}

```

#### 4）缩放

- transform: scaleZ() 沿着z轴方向缩放 (厚度)

- transform: scale3d() 沿着x、y、z轴方向缩放

- 取值

- 默认值为1

- 使用0~1之间的值缩小元素

使用超过1的值放大元素

- 注意：scaleZ单独使用看不到效果，需要配合其他变换属性一起使用

```html

transform: scaleZ(3);

transform: scale3d(2, 3, 3);

```

3D缩放Z轴演示

```html

<!doctype html>

<html>

<head>

<title>无标题文档</title>

<style>

.wrap {

width: 1000px;

height: 600px;

border: 1px solid red;

perspective: 500px;

perspective-origin: right top;

}

.box {

position: absolute;

left: 50%;

margin-left: -100px;

top: 50%;

margin-top: -100px;

width: 200px;

height: 200px;

transform-style: preserve-3d;

/* transform: scale3d(1.5, 1, 1.5); */

transform: scaleZ(1.5);

}

.box div {

position: absolute;

left: 0;

top: 0;

width: 200px;

height: 200px;

}

.box div:nth-child(1) {

background: red;

transform: rotateX(90deg) translateZ(100px);

}

.box div:nth-child(2) {

background: yellow;

transform: rotateX(90deg) translateZ(-100px);

}

.box div:nth-child(3) {

background: green;

transform: rotateY(90deg) translateZ(100px);

}

.box div:nth-child(4) {

background: blue;

transform: rotateY(90deg) translateZ(-100px);

}

.box div:nth-child(5) {

background: pink;

transform: translateZ(100px);

}

.box div:nth-child(6) {

background: orange;

transform: translateZ(-100px);

}

</style>

</head>

<body>

</div>

</body>

</html>

```