前言
本文介绍的是css3的3d模块，对大家具有一定的参考价值，感兴趣的朋友们下面来一起看看吧。
介绍
首先，我们来了解一下3d的坐标系，x轴在屏幕上为水平方向，y轴为垂直方向，而z轴为垂直于屏幕的方向。
不理解的话可以参考定位属性的z-index属性，那个在某种意义上就是让元素在z轴的移动。
在2d转换模块中我们研究了rotateX()和rotateY()方法，就是绕x轴和y轴旋转，这其实就是3d模块的一种表现，当然要看到近大远小的3d效果，还需要在父元素上添加透视属性：transform:perspective（500px）;值为透视点到元素的距离，具体概念请看美术透视教学。。。。
多说无益，上代码：
| <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 200px; height: 200px; margin: 0 auto; } .div1{ margin-top: 100px; transform:perspective(500px) rotatey(0deg); position: relative; border:1px solid #000000; background-color: #ff0000; } .div1 div{ transform:rotatey(45deg); position: absolute; font-size: 80px; line-height: 200px; text-align: center; top: 0; left: 0; } </style></head><body><div class="div1"> <div class="div1_1">1</div></div></body></html> |
效果图：
但是，你会发现当父元素转到90度的时候元素消失了，这就说明元素是没有厚度的。说明元素虽然具有了近大远小的透视属性，但本质上仍是2d的。
这是你需要添加transform-style:preserve-3d;样式来让元素在3d空间中转换。这样，元素就处在了3维的空间里，当父元素旋转90度，仍能看到里面的子元素。
示例代码：
| <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 200px; height: 200px; margin: 0 auto; } .div1{ margin-top: 100px; transform:perspective(500px) rotatey(0deg); transform-style:preserve-3d; position: relative; border:1px solid #000000; } .div1 div{ background-color: #ff0000; transform:rotatey(45deg); position: absolute; font-size: 80px; line-height: 200px; text-align: center; top: 0; left: 0; } </style></head><body><div class="div1"> <div class="div1_1">1</div></div></body></html> |
