CSS3 允許使用 3D 轉換來對元素進行格式化。
㈠瀏覽器支持
Internet Explorer 10 和 Firefox 支持 3D 轉換。
Chrome 和 Safari 需要前綴 -webkit-。
Opera 仍然不支持 3D 轉換（它只支持 2D 轉換）。
㈡rotateX() 方法
通過 rotateX() 方法，元素圍繞其 X 軸以給定的度數進行旋轉。
1 代碼如下所示： 2 <!DOCTYPE html> 3 <html> 4 <head> 5 <style> 6 div 7 { 8 width:220px; 9 height:200px; 10 background-color:yellow; 11 border:1px solid black; 12 } 13 div#div2 14 { 15 transform:rotateX(60deg); 16 -webkit-transform:rotateX(60deg); /* Safari and Chrome */ 17 -moz-transform:rotateX(60deg); /* Firefox */ 18 } 19 </style> 20 </head> 21 <body> 22 23 <div>初始狀態</div> 24 25 <div id="div2">圍繞x軸旋轉120度</div> 26 27 <p><b>注釋：</b> 元素圍繞其 X 軸以給定120度數進行旋轉</p> 28 29 </body> 30 </html>
效果如下：
㈢rotateY() 旋轉
通過 rotateY() 方法，元素圍繞其 Y 軸以給定的度數進行旋轉。
1 代碼如下所示： 2 <!DOCTYPE html> 3 <html> 4 <head> 5 <style> 6 div 7 { 8 width:190px; 9 height:165px; 10 background-color:blue; 11 border:1px solid black; 12 } 13 div#div2 14 { 15 transform:rotateY(130deg); 16 -webkit-transform:rotateY(130deg); /* Safari and Chrome */ 17 -moz-transform:rotateY(130deg); /* Firefox */ 18 } 19 </style> 20 </head> 21 <body> 22 23 <div>初始狀態</div> 24 25 <div id="div2">圍繞y軸旋轉130度</div> 26 27 <p><b>注釋：</b>元素圍繞其 y軸以給定130度數進行旋轉</p> 28 29 </body> 30 </html>
效果如下：
㈣rotateZ() 旋轉
通過 rotateZ() 方法，元素圍繞其 Y 軸以給定的度數進行旋轉。
1 代碼如下所示： 2 <!DOCTYPE html> 3 <html> 4 <head> 5 <style> 6 div 7 { 8 width:170px; 9 height:135px; 10 background-color:red; 11 border:1px solid black; 12 } 13 div#div2 14 { 15 transform:rotateZ(110deg); 16 -webkit-transform:rotateZ(110deg); /* Safari and Chrome */ 17 -moz-transform:rotateZ(110deg); /* Firefox */ 18 } 19 </style> 20 </head> 21 <body> 22 23 <div>初始狀態</div> 24 25 <div id="div2">圍繞Z軸旋轉110度</div> 26 27 <p><b>注釋：</b>元素圍繞其 Z軸以給定110度數進行旋轉</p> 28 29 </body> 30 </html>
效果如下：
㈤轉換屬性
下面的表格列出了所有的轉換屬性：
⑴transform-origin 屬性
★transform-origin 屬性允許您改變被轉換元素的位置。
2D 轉換元素能夠改變元素 x 和 y 軸。3D 轉換元素還能改變其 Z 軸。
為了更好地理解 transform-origin 屬性，請查看這個下面鏈接的演示：
2D轉換鏈接：https://www.w3school.com.cn/example/css3/demo_css3_transform-origin.html
3D轉換鏈接：https://www.w3school.com.cn/example/css3/demo_css3_transform-origin_3D.html
★示例：設置旋轉元素的基點位置
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 #div1 6 { 7 position: relative; 8 height: 200px; 9 width: 200px; 10 margin: 100px; 11 padding:10px; 12 border: 1px solid black; 13 } 14 15 #div2 16 { 17 padding:50px; 18 position: absolute; 19 border: 1px solid black; 20 background-color: yellow; 21 transform: rotate(45deg); 22 transform-origin:20% 40%; 23 -ms-transform: rotate(45deg); /* IE 9 */ 24 -ms-transform-origin:20% 40%; /* IE 9 */ 25 -webkit-transform: rotate(45deg); /* Safari and Chrome */ 26 -webkit-transform-origin:20% 40%; /* Safari and Chrome */ 27 -moz-transform: rotate(45deg); /* Firefox */ 28 -moz-transform-origin:20% 40%; /* Firefox */ 29 -o-transform: rotate(45deg); /* Opera */ 30 -o-transform-origin:20% 40%; /* Opera */ 31 } 32 </style> 33 </head> 34 35 <body> 36 37 <div id="div1"> 38 <div id="div2">HELLO</div> 39 </div> 40 41 </body>
效果如下：
★語法：transform-origin: x-axis y-axis z-axis;
⑵transform-style 屬性
★transform-style 屬性規定如何在 3D 空間中呈現被嵌套的元素。
注意：該屬性必須與 transform 屬性一同使用。
★語法：transform-style: flat|preserve-3d;
★示例：使被轉換的子元素保留其 3D 轉換
1 代碼如下所示： 2 <!DOCTYPE html> 3 <html> 4 <head> 5 <style> 6 #div1 7 { 8 position: relative; 9 height: 200px; 10 width: 200px; 11 margin: 100px; 12 padding:10px; 13 border: 1px solid black; 14 } 15 16 #div2 17 { 18 padding:50px; 19 position: absolute; 20 border: 1px solid black; 21 background-color: red; 22 transform: rotateY(60deg); 23 transform-style: preserve-3d; 24 -webkit-transform: rotateY(60deg); /* Safari and Chrome */ 25 -webkit-transform-style: preserve-3d; /* Safari and Chrome */ 26 } 27 28 #div3 29 { 30 padding:40px; 31 position: absolute; 32 border: 1px solid black; 33 background-color: yellow; 34 transform: rotateY(80deg); 35 -webkit-transform: rotateY(-60deg); /* Safari and Chrome */ 36 37 } 38 </style> 39 </head> 40 41 <body> 42 43 <div id="div1"> 44 <div id="div2">HELLO 45 <div id="div3">YELLOW</div> 46 </div> 47 </div> 48 49 </body> 50 </html>
效果如下;
⑶perspective 屬性
★perspective 屬性定義 3D 元素距視圖的距離，以像素計。該屬性允許您改變 3D 元素查看 3D 元素的視圖。
當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身。
注意：①perspective 屬性只影響 3D 轉換元素。
②與 perspective-origin 屬性一同使用該屬性，這樣就能夠改變 3D 元素的底部位置。
★語法：perspective: number|none;
透明度擁有近大遠小的特點，因此在設置透明度時設置數值相對較小最好。
★示例：設置元素被查看位置的視圖
1 代碼如下圖所示： 2 <!DOCTYPE html> 3 <html> 4 <head> 5 <style> 6 #div1 7 { 8 position: relative; 9 height: 150px; 10 width: 150px; 11 margin: 50px; 12 padding:10px; 13 border: 1px solid black; 14 perspective:120; 15 -webkit-perspective:120; /* Safari and Chrome */ 16 } 17 18 #div2 19 { 20 padding:50px; 21 position: absolute; 22 border: 1px solid black; 23 background-color: yellow; 24 transform: rotateX(45deg); 25 -webkit-transform: rotateX(45deg); /* Safari and Chrome */ 26 } 27 </style> 28 </head> 29 30 <body> 31 32 <div id="div1"> 33 <div id="div2">HELLO</div> 34 </div> 35 36 </body> 37 </html>
效果如下：
⑷perspective-origin 屬性
★perspective-origin 屬性定義 3D 元素所基於的 X 軸和 Y 軸。該屬性允許您改變 3D 元素的底部位置。
當為元素定義 perspective-origin 屬性時，其子元素會獲得透視效果，而不是元素本身。
★語法：perspective-origin: x-axis y-axis;
⑸backface-visibility 屬性
★backface-visibility 屬性定義當元素不面向屏幕時是否可見。
如果在旋轉元素不希望看到其背面時，該屬性很有用。
★語法：backface-visibility: visible|hidden;
★示例：隱藏被旋轉的 div 元素的背面：
代碼如下所示： <!DOCTYPE html> <html> <head> <style> div { position:relative; height:120px; width:120px; border:1px solid #000; background-color:yellow; transform:rotateY(180deg); -webkit-transform:rotateY(180deg); /* Chrome and Safari */ -moz-transform:rotateY(180deg); /* Firefox */ } #div1 { -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; } #div2 { -webkit-backface-visibility:visible; -moz-backface-visibility:visible; -ms-backface-visibility:visible; } </style> </head> <body> <p>本例有兩個 div 元素，均旋轉 180 度，背向用戶。</p> <p>第一個 div 元素的 backface-visibility 屬性設置為 "hidden"，所以應該是不可見的。</p> <div id="div1">DIV 1</div> <div id="div2">DIV 2</div> </body> </html>
效果如下：
㈥2D Transform 方法
參考：w3school
希望有所幫助！