二、3D转换
2.1、绕X轴、Y轴旋转(rotateX、rotateY)
介绍
含义：将transform属性的值设置为rotateX()或者rotateY()，即可实现绕横轴、纵轴(x轴、y轴)旋转。
前提要求：需要在设置transform: rotateX()的父元素设置perspective属性，否则就会失效！
perspective的语法设置：perspective: 600px。该属性值设置大小效果就是你离这个舞台的远近感觉，若是值设置的越大，感觉越远，效果就越不明显；值设置的小，感觉越近，效果就越明显。
语法：一般有三种设置方式
transform: rotateX(30deg);：绕X轴进行3D旋转。
transform: rotateY(30deg);：绕Y轴进行3D旋转。
transform: rotateX(30deg) rotateY(30deg);：同时绕X轴、Y轴进行旋转。
额外：对于rotateZ，指的就是平面旋转。
demo示例
效果：perspective属性(这里设置为600px来进行演示)设置越小，效果越明显噢！
①看到绕着X轴进行旋转，360deg为一周。
②看到绕着Y轴进行旋转，360deg为一周。
③可以同时对X轴、Y周进行3D旋转
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2gRmYWOP-1651797571904)(C:\Users\93997\Desktop\GIF.gif)]
源码：
<style> * { padding: 0px; margin: 0px; } div { text-align: center; } div.box div { width: 102px; height: 102px; border: 1px solid red; /* 设置观点(舞台)：就像你离远近的效果，数值越大就感觉离得越远，效果也不明显 */ perspective: 600px; margin: 20px auto; margin-top: 0; } p.box1 { width: 100px; height: 100px; border: 1px solid #000; background-color: orange; /* 绕x轴进行3D旋转 */ transform: rotateX(30deg); } p.box2 { width: 100px; height: 100px; border: 1px solid #000; background-color: orange; /* 绕y轴进行3D旋转 */ transform: rotateY(30deg); } p.box3 { width: 100px; height: 100px; border: 1px solid #000; background-color: orange; /* 绕x轴、y轴进行3D旋转 */ transform: rotateX(30deg) rotateY(30deg); } </style> <body> <div class="box"> <!-- 测试rotateX --> 测试rotateX <div> <p class="box1"></p> </div> <!-- 测试rotateY --> 测试rotateY <div> <p class="box2"></p> </div> <!-- 测试rotateX、rotateY一起使用 --> 测试rotateX、rotateY一起使用 <div> <p class="box3"></p> </div> </div> </body>
2.2、空间移动(rotateX或rotateY配合translatex,y,z使用)
介绍与示例效果
介绍
空间移动的前提条件：当元素进行3D旋转过后(设置rotateX属性后)，即可继续添加translateX、translateY、translateZ属性让元素在空间中进行移动。
移动的方向与位置：以当前的旋转面作为坐标轴
translateX：根据水平进行左右平移。
translateY：根据旋转的角度，按照这个角度进行上下。
translateZ：按照它当前的平面朝向，前行与后退。
语法：举例如transform: rotateX(30deg) translateX(100px) translateY(100px) translateZ(100px);
说明：你可以想象一个物体在一个空间里进行移动。
示例
这个与进行绝对定位平移的效果不一样，其是可以在空间中进行平移！
案例：通过空间移动创建一个正方体
效果展示图：一个div里面有6个p标签，这6个P标签通过使用绝对定位来进行脱离文档流，接着使用空间移动来进行组合为一个正方体
源码：
<style> * { padding: 0px; margin: 0px; } /* 外部大盒子 */ div.box { width: 800px; height: 300px; margin: 20px auto; border: 1px solid #000; position: relative; } /* 间隔位置 */ div.jiange { font-size: 80px; position: absolute; width: 100px; height: 300px; top: 50%; left: 50%; margin-top: -40px; margin-left: -40px; } /* 未创建正方形时 */ div.box1 { float: left; width: 202px; height: 202px; border: 1px solid #000; margin: 40px auto; position: relative; /* 设置perspective,令3D旋转生效 */ perspective: 600px; margin-left: 100px; } div.box1 p { /* 绝对定位，让8个P元素都脱离文档流 */ position: absolute; top: 0; left: 0; width: 200px; height: 200px; border: 1px solid #000; background-color: rgba(0, 0, 0, .1); } /* 空间移动后 */ div.box2 { float: right; width: 202px; height: 202px; border: 1px solid #000; margin: 40px auto; position: relative; /* 设置perspective,令3D旋转生效 */ perspective: 600px; margin-right: 100px; } div.box2 p { /* 绝对定位，让8个P元素都脱离文档流 */ position: absolute; top: 0; left: 0; width: 200px; height: 200px; border: 1px solid #000; } div.box2 p:nth-child(1) { background-color: rgba(238, 73, 8, 0.55); /* 正面：直接向前行进，行进长度应该为正方形的一半 */ transform: rotateX(0deg) translateZ(100px); z-index: 999; } div.box2 p:nth-child(2) { background-color: rgba(126, 245, 15, 0.897); /* 顶部：旋转了90度后，根据朝向面向上100px */ transform: rotateX(90deg) translateZ(100px); } div.box2 p:nth-child(3) { background-color: rgba(44, 161, 14, 0.897); /* 背部：后仰180度，根据朝向面前进100px */ transform: rotateX(180deg) translateZ(100px); } div.box2 p:nth-child(4) { background-color: rgba(247, 22, 247, 0.897); /* 底面：前仰90度，根据朝向面前进100px */ transform: rotateX(-90deg) translateZ(100px); } div.box2 p:nth-child(5) { background-color: rgba(41, 19, 233, 0.897); /* 右侧面 */ transform: rotateY(90deg) translateZ(100px); } div.box2 p:nth-child(6) { /* 左侧面 */ transform: rotateY(270deg) translateZ(100px); } </style> <body> <div class="box"> <div class="box1"> <p></p> <p></p> <p></p> <p></p> <p></p> </div> <div class="jiange">></div> <div class="box2"> <p></p> <p></p> <p></p> <p></p> <p></p> </div> </div> </body>
