在学习Css3的过程中，我想做一个类似金字塔，菱形翻页效果，如图这种效果
如是，我自己设计了一个，不带js的旋转效果:
1>第一步我先设计了一个方块，内含一个旋转了45deg的小方块，代码如下：
<div style=" 141.4px;height: 141.4px; background-color: green;"> <div style=" 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=" 141.4px; height: auto;"> <div class="rotate" style=" 141.4px; height: auto;"> <div style=" 141.4px;height: 141.4px; background-color: green;"> <div style=" 100px; height: 100px; transform:rotate(45deg); margin-left: 20px;margin-top: 20px; background-color: red; position: absolute;"></div> </div> <div class="back" style=" 141.4px;height: 141.4px; position: absolute;top: 0; background-color: yellow;"> <div style=" 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=" 960px;height: 400px;"> 29 <div class="out" style=" 141.4px; height: auto;"> 30 <div class="rotate" style=" 141.4px; height: auto;"> 31 <div style=" 141.4px;height: 141.4px; background-color: green;"> 32 <div style=" 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=" 141.4px;height: 141.4px; position: absolute;top: 0; background-color: yellow;"> 35 <div style=" 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
感谢@上位者的怜悯的指正！