css 3D动画实现两面旋转盒子

        两个盒子交叠，通过动画实现旋转，若出现仅仅显示一个盒子的旋转，被遮挡的盒子不显示。如图：旋转前和旋转后。

 

                        图1                                                                图2

        解决办法：

   1、给两个盒子均添加backface-visibility: hidden;

   2、给背面的盒子添加transform:  translateZ(0.1px);

        

        第二个盒子旋转之后字是相反显示的，如图2所示

        解决办法:

        给背面的盒子添加transform: rotateY(180deg)属性。