3D空间转换（位移、旋转、立体呈现）

重点语法：

transform:translateX(值);沿x轴位移，y、z轴同理。

transform:rotateX(值);沿x轴旋转，y、z轴同理。

perspective: 像素单位数值;实现透视效果，添加给父级。常用数值范围800px-1200px。

transform-style: preserve-3d; 使子元素处于真正的3d空间，添加给父级。

空间位移：

复合语法：transform:translate3d(x,y,z);

单独语法：transform:translateX(值);transform:translateY(值);transform:translateZ(值);

x、y轴上的改变与2d位移没有区别，z轴垂直于屏幕，正值方向指向用户，负值方向指向屏幕里面。z轴上的移动需要给父级添加perspective: 像素单位数值;实现透视效果。

perspective 常用数值范围在 800-1200 之间。代表意思为视距，作用是在空间转换时，为元素添加近大远小、近实远虚的视觉效果。

例：

两个一样大小的粉蓝方块，如果没加perspective，hover之后看不到变化，但实际上box2向z轴移动了。hover后box2和box1不处在同一个水平面，他们之间有梯度，正面看的效果便是box2比box1大，因为box2离用户更近。

<style>.box{margin:100px auto;width: 700px;perspective: 1100px;}.box1 {width: 200px;height: 200px;margin:0 30px;float: left;background-color: pink;}.box2 {width: 200px;height: 200px;margin:0 30px;float: left;background-color: rgb(116, 211, 248);}.box2:hover {transform: translateZ(100px);}</style>
</head>
<body>
<div class="box"><div class="box1"></div><div class="box2"></div>
</div>
</body>

空间旋转：

复合语法：transform:rotate3d(x,y,z,角度度数);

x、y、z取值为0-1。复合语法是用来设置自定义旋转轴的位置及旋转的角度，极少使用。

单独语法：transform:rotateX();transform:rotateY();transform:rotateZ();

绕轴旋转。

例：

以下图片分别是原图、没加perspective绕x轴45度效果、加了透视1000px后分别绕x轴、y轴、z轴正值方向45度效果。

<style>.box {width: 300px;margin: 100px auto;border: 2px solid #000;perspective: 1000px;}img {width: 300px;transition: all 2s;}.box img:hover {/* transform: rotateX(45deg); *//* transform: rotateY(45deg); */transform: rotateZ(45deg);}</style>
</head>
<body><div class="box"><img src="./images/hero.jpeg" alt=""></div>
</body>

判断旋转方向：

左手法则: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向。

立体呈现：

perspective只能呈现近大远小、近实远虚的视觉效果，让z轴位移看得出变化，但不能呈现立体图形翻面等效果。

所以需要给父级添加 transform-style: preserve-3d; 使子元素处于真正的3d空间

例：两个大小相同颜色不同的块，一个在前一个在后，使用transform-style: preserve-3d;的效果。

<style>.cube {position: relative;width: 200px;height: 200px;margin: 100px auto;background-color: pink;transition: all 2s;/*使子元素处于3D空间*/transform-style: preserve-3d;}.cube div {position: absolute;left: 0;top: 0;width: 200px;height: 200px;}.front {background-color: orange;/* 向我走近200px */transform: translateZ(200px);/*将两个面在空间上分开层次*/}.back {background-color: green;}/* cube hover 为了看空间感效果 */.cube:hover {transform: rotateY(55deg);}</style>
</head>
<body><div class="cube"><div class="front">前面</div><div class="back">后面</div></div>
</body>
</html>