css3 旋转效果加上双面显示效果

在学习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

感谢@上位者的怜悯的指正！