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

在学习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样式代码

  body{margin: 0;padding:0;}

      .rotate{
          transition: 2s ease;
      }
.out:hover .rotate{
    transform:rotateY(180deg);
    transition: 2s ease;
}

 

现在问题来了，查看效果时，发现始终只有一个一个方块在翻转，第二个方块被覆盖了，被上层的方块给挡住了。ps:这里困扰了我一两个小时。

查css3 手册，及网上资料时发现，css3的3d旋转效果，并没有分层的这种思想，直接是以你看的视角为主，没有实际透视的那么直接。效果上说明是3d的旋转实际上你是看不到下层被遮挡的部分的，这里我一开始是使用translateZ,来解决这个问题，但实际上是不成的，还是会覆盖。所以其实最好的方法就是调透明度，既然下层的部分是被覆盖了，那我让上层的部分在翻转时，透明不就可以了，实事证明这是可行的且正确的 ，代码如下：

 .back{
       opacity: 0.4;
       transition: 1s opacity;
   }
      .out:hover .back{opacity: 1;}

 

现在做成那种效果只需要布局就可以了。

完整代码如下：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
      body{margin: 0;padding:0;}

      .rotate{
          transition: 2s ease;
      }
.out:hover .rotate{
    transform:rotateY(180deg);
    transition: 2s ease;
}
   .back{
       opacity: 0.4;
       transition: 1s opacity;
   }
      .out:hover .back{opacity: 1;}
  </style>
 </head>
 <body>
<div style="width: 960px;height: 400px;">
<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>

 </div>

 </body>
</html>

 现在复制代码就可以运行了

补充说明，兼容性问题：

由于我只在IE11下测试，兼容性出现一点问题，如果在IE下运行，需要在父标签，class="out",这个div中加上transform-style:preserve-3d;告诉浏览器执行3d效果

交流学习：1689986723

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