前言
本文介紹的是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> |
