今天介绍 两种 3D变形的形式：3D旋转、空间位移。
3D旋转
在上一节 2D变形中， 我们用到了 transform 属性。那么在3D旋转中同样还是这个属性（怎么老是它，手动狗头）。
用rotateX() 函数来给 transform 属性赋值，即可实现元素标签绕X（横）轴3D旋转。
语法
// 绕横轴（盒子X轴中心线 旋转 30 度）
transform: **rotateX**(30deg)
用rotateY() 函数来给 transform 属性赋值，即可实现元素标签绕Y（横）轴3D旋转。
语法
// 绕纵轴（盒子Y轴中心线 旋转 30 度）
transform: **rotateY**(30deg)
用rotateZ() 函数来给 transform 属性赋值，即可实现元素标签绕Z（竖）轴3D旋转。
语法
// 绕纵轴（盒子Y轴中心线 旋转 30 度）
transform: **rotateZ**(30deg)
如果只用单独的transform 和 一个空间旋转函数 来做，可能视觉上并不能达到要求。
举例
红色部分就是 box1 , 其实它是一个正方形，当我们 设置了 X轴旋转后，它看起来像一个 长方形， 其实这是因为 旋转造成的， 而网页又是一个平面，我们看不到旋转到里面的那一部分，所以呈现出来的就是一个长方形。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=<device-width>, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 200px;
height: 200px;
background-color: red;
transform: rotateX(30deg);
}
.parentBox {
width: 200px;
height: 200px;
border: 1px orange solid;
margin: auto;
}
</style>
</head>
<body>
<div class="parentBox">
<div class="box1"></div>
</div>
</body>
</html>
如果想看出是旋转的样子，还需要一个属性配合, 那就是 perspective。
perspective
perspective 表示 观察者（人）到 平面元素的 距离。值越大，表示距离平面元素越远。
配合 transform 如下
举例
实现 子元素 沿X轴旋转 30度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=<device-width>, initial-scale=1.0" />
<title>3D旋转示例</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 200px;
height: 200px;
background-color: red;
transform: rotateX(30deg);
}
.parentBox {
width: 200px;
height: 200px;
border: 2px green solid;
margin: auto;
margin-top: 10px;
perspective: 300px;
}
</style>
</head>
<body>
<div class="parentBox">
<div class="box1"></div>
</div>
</body>
</html>
元素可以同时绕多个轴旋转，例如 绕X轴旋转30度，绕Y轴旋转30度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=<device-width>, initial-scale=1.0" />
<title>3D旋转示例1</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 200px;
height: 200px;
background-color: red;
transform: rotateX(30deg) rotateY(30deg);
}
.parentBox {
width: 200px;
height: 200px;
border: 2px green solid;
margin: auto;
margin-top: 10px;
perspective: 300px;
}
</style>
</head>
<body>
<div class="parentBox">
<div class="box1"></div>
</div>
</body>
</html>
空间位移
当元素发生 3D旋转后，就可以进行空间位移。注意 一定要是发生旋转后，才可以看出位移效果，否则就和2D平面位移没啥区别了。
用 translateX()、 translateY()、translateZ() 给 transform 赋值，就可以分别 发生三个方向X轴，Y轴，Z轴方向的移动。三个位移函数接收参数支持长度单位。
语法
// 发生3D旋转后， 才能看出3D效果
// 可以同时发生多个方向位移
transform: rotateX(30deg) translateX(30px) translateY(30px);
举例
一个元素， 在X轴方向发生30px距离的位移， 在Y轴方向发生30px的位移。效果如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>空间位移</title>
<style>
p {
width: 200px;
height: 200px;
background-color: orange;
}
.box1 {
width: 202px;
height: 202px;
border: 1px solid black;
perspective: 300px;
}
.box1 p {
transform: rotateX(30deg) translateX(30px) translateY(30px);
}
</style>
</head>
<body>
<div class="box1">
<p></p>
</div>
</body>
</html>