在學習Css3的過程中，我想做一個類似金字塔，菱形翻頁效果，如圖這種效果
如是，我自己設計了一個，不帶js的旋轉效果:
1>第一步我先設計了一個方塊，內含一個旋轉了45deg的小方塊，代碼如下：
<div style="width: 141.4px;height: 141.4px; background-color: green;"> <div style="width: 100px; height: 100px; transform:rotate(45deg); margin-left: 20px;margin-top: 20px; background-color: red; position: absolute;"></div> </div>
效果圖如下：
2>第二步，由於是要在3d旋轉180deg后可以看到方塊背后的內容，所以復制第一個方塊的代碼，並將background-color顏色改成其他顏色，便於觀察。通過定位opaction,使兩個方塊重疊。
<div class="out" style="width: 141.4px; height: auto;"> <div class="rotate" style="width: 141.4px; height: auto;"> <div style="width: 141.4px;height: 141.4px; background-color: green;"> <div style="width: 100px; height: 100px; transform:rotate(45deg); margin-left: 20px;margin-top: 20px; background-color: red; position: absolute;"></div> </div> <div class="back" style="width: 141.4px;height: 141.4px; position: absolute;top: 0; background-color: yellow;"> <div style="width: 100px; height: 100px; transform:rotate(45deg); margin-left: 20px;margin-top: 20px; background-color: blueviolet; position: absolute;"></div> </div> </div> </div>
3>為了讓方塊旋轉起來，加上css樣式代碼
1 body{margin: 0;padding:0;} 2 3 .rotate{ 4 transition: 2s ease; 5 } 6 .out:hover .rotate{ 7 transform:rotateY(180deg); 8 transition: 2s ease; 9 }
現在問題來了，查看效果時，發現始終只有一個一個方塊在翻轉，第二個方塊被覆蓋了，被上層的方塊給擋住了。ps:這里困擾了我一兩個小時。
查css3 手冊，及網上資料時發現，css3的3d旋轉效果，並沒有分層的這種思想，直接是以你看的視角為主，沒有實際透視的那么直接。效果上說明是3d的旋轉實際上你是看不到下層被遮擋的部分的，這里我一開始是使用translateZ,來解決這個問題，但實際上是不成的，還是會覆蓋。所以其實最好的方法就是調透明度，既然下層的部分是被覆蓋了，那我讓上層的部分在翻轉時，透明不就可以了，實事證明這是可行的且正確的 ，代碼如下：
.back{ opacity: 0.4; transition: 1s opacity; } .out:hover .back{opacity: 1;}
現在做成那種效果只需要布局就可以了。
完整代碼如下：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Generator" content="EditPlus®"> 6 <meta name="Author" content=""> 7 <meta name="Keywords" content=""> 8 <meta name="Description" content=""> 9 <title>Document</title> 10 <style> 11 body{margin: 0;padding:0;} 12 13 .rotate{ 14 transition: 2s ease; 15 } 16 .out:hover .rotate{ 17 transform:rotateY(180deg); 18 transition: 2s ease; 19 } 20 .back{ 21 opacity: 0.4; 22 transition: 1s opacity; 23 } 24 .out:hover .back{opacity: 1;} 25 </style> 26 </head> 27 <body> 28 <div style="width: 960px;height: 400px;"> 29 <div class="out" style="width: 141.4px; height: auto;"> 30 <div class="rotate" style="width: 141.4px; height: auto;"> 31 <div style="width: 141.4px;height: 141.4px; background-color: green;"> 32 <div style="width: 100px; height: 100px; transform:rotate(45deg); margin-left: 20px;margin-top: 20px; background-color: red; position: absolute;"></div> 33 </div> 34 <div class="back" style="width: 141.4px;height: 141.4px; position: absolute;top: 0; background-color: yellow;"> 35 <div style="width: 100px; height: 100px; transform:rotate(45deg); margin-left: 20px;margin-top: 20px; background-color: blueviolet; position: absolute;"></div> 36 </div> 37 </div> 38 </div> 39 40 </div> 41 42 </body> 43 </html>
現在復制代碼就可以運行了
補充說明，兼容性問題：
由於我只在IE11下測試，兼容性出現一點問題，如果在IE下運行，需要在父標簽，class="out",這個div中加上transform-style:preserve-3d;告訴瀏覽器執行3d效果
交流學習：1689986723
感謝@上位者的憐憫的指正！