首先，我們來瞭解一下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> p{ width: 200px; height: 200px; margin: 0 auto; } .p1{ margin-top: 100px; transform:perspective(500px) rotatey(0deg); position: relative; border:1px solid #000000; background-color: #ff0000; } .p1 p{ transform:rotatey(45deg); position: absolute; font-size: 80px; line-height: 200px; text-align: center; top: 0; left: 0; } </style></head><body><p class="p1"> <p class="p1_1">1</p></p></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> p{ width: 200px; height: 200px; margin: 0 auto; } .p1{ margin-top: 100px; transform:perspective(500px) rotatey(0deg); transform-style:preserve-3d; position: relative; border:1px solid #000000; } .p1 p{ background-color: #ff0000; transform:rotatey(45deg); position: absolute; font-size: 80px; line-height: 200px; text-align: center; top: 0; left: 0; } </style></head><body><p class="p1"> <p class="p1_1">1</p></p></body></html>
：
上面，我們對3d轉換模組有了一個初步的瞭解，下面我們一起做一個正方體，來整理一下3d模組的知識。
一步步來做著寫太過麻煩，我就將過程寫在代碼的注釋裡，小夥伴們請見諒。
代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轉換模組-正方體</title> <style> *{ margin: 0; padding: 0; /*去除預設邊距*/ } ul{ width: 200px; height: 200px; border: 1px solid #000; box-sizing: border-box; margin: 100px auto; position: relative; /*修改基本樣式*/ transform: rotateY(45deg) rotateX(45deg); /*旋轉看看效果*/ transform-style: preserve-3d; /*將父元素設定為3d空間*/ } ul li{ list-style: none; width: 200px; height: 200px; font-size: 60px; text-align: center; line-height: 200px; position: absolute; left: 0; top: 0; /*修改基本樣式*/ } ul li:nth-child(1){ background-color: red; transform: translateX(-100px) rotateY(90deg); /*將第一個l向左移動100像素，然後繞y軸旋轉90度，形成左邊的面*/ } ul li:nth-child(2){ background-color: green; transform: translateX(100px) rotateY(90deg); /*將第一個2向右移動100像素，然後繞y軸旋轉90度*，形成右邊的面*/ } ul li:nth-child(3){ background-color: blue; transform: translateY(-100px) rotateX(90deg); /*將第一個3向上移動100像素，然後繞x軸旋轉90度，形成上面的面*/ } ul li:nth-child(4){ background-color: yellow; transform: translateY(100px) rotateX(90deg); /*將第一個4向下移動100像素，然後繞x軸旋轉90度*/ } ul li:nth-child(5){ background-color: purple; transform: translateZ(-100px); /*將第一個5向後移動100像素，形成後面的面*/ } ul li:nth-child(6){ background-color: pink; transform: translateZ(100px); /*將第一個l向前移動100像素，形成前面的面*/ }</style></head><body><ul> <!--首先做好html布局，正方體有6個面，所以寫了6個li--> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li></ul></body></html>
：
這個方法比較好理解，理解了之後請看下一個。
代碼在下面：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> p{ width: 200px; height: 200px; margin: 0 auto; /*修改基本樣式*/ } .p1{ margin-top: 100px; transform: perspective(400px) rotatex(0deg) rotatey(0deg); /*擁有近大遠小透視效果*/ transform-style: preserve-3d; /*設定為3d空間*/ position: relative; border:1px solid #000000; animation: xuanzhuan 5s cubic-bezier(0.0,0.0,0.0,0.0) infinite forwards; /*旋轉動畫*/ } .p1 p{ position: absolute; font-size: 80px; line-height: 200px; text-align: center; top: 0; left: 0; /*內部樣式*/ } .p1_1{ transform: translatez(100px); background-color: red; /*向前移動100像素，作為最前面的面*/ } .p1_2{ transform: rotatex(90deg) translatez(100px); background-color:green; /*繞x軸旋轉90度，在z軸正方向移動100像素，作為上面的面*/ /*註：旋轉時座標系會跟著一起旋轉，z軸原來是垂直螢幕向外的，繞x軸旋轉90度以後就是在螢幕上向上的方向*/ } .p1_3{ transform: rotatex(180deg) translatez(100px); background-color: blue; /*繞x軸旋轉180度，這時z軸垂直螢幕向內，在z軸正方向移動100像素，作為後面的面*/ } .p1_4{ transform: rotatex(270deg) translatez(100px); background-color: purple; /*繞x軸旋轉270度，這時z軸向下，在z軸正方向移動100像素，作為下面的面*/ } .p1_5{ transform: rotatey(90deg) translatez(100px); background-color: pink; /*繞y軸旋轉90度，這時z軸向右，在z軸正方向移動100像素，作為右面的面*/ } .p1_6{ transform: rotatey(270deg) translatez(100px); background-color: yellow; /*繞y軸旋轉90度，這時z軸向左，在z軸正方向移動100像素，作為左面的面*/ } @-webkit-keyframes xuanzhuan{ from{ transform:perspective(400px) rotatex(0deg); } to{ transform:perspective(400px) rotatex(360deg); } } .p1:hover{ transform: perspective(400px) scale(1.5); animation: xuanzhuan 5s cubic-bezier(0.0,0.0,0.0,0.0) infinite paused forwards; /*有hover事件是動畫暫停*/ } </style></head><body><p class="p1"> <p class="p1_1">1</p> <p class="p1_2">2</p> <p class="p1_3">3</p> <p class="p1_4">4</p> <p class="p1_5">5</p> <p class="p1_6">6</p></p><!--html標籤布局--></body></html>
：
這種寫法只要理解了，寫起來會更加的方便，而且不不用去考慮轉換的角度不對會導致內容是反的，所以推薦這一種寫法。當然這種寫法在x軸和y軸一起旋轉是也會造成內容的反轉。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
