在3D制作正方形时，将动画效果的opacity值设置小于1时，正方体崩塌为一个面的原因解析

在使用CSS3.0制作3D正方体时，将底层div的opacity值设置为小于1时。或是在@keyframes中将opacity设置为小于1时。正方体塌陷为2D的平面体。
如下图为正常显示的正方体3D图形，其中opacity值为1
如下图显示的正方体，其中opacity值为非1
两图对比可发现，当正方体的父级div的opacity值小于1时，原有的正方体出现了塌陷，显示为一个二维图形。
通过观察可以发现，塌陷后的二维图形只显示了原正方体的前后两个面（注意观察图形左上角的描述文字）其他通过旋转原有和平移的四个面均为显示。由此可以推论，当父级的opacity值小于1时，旋转所得的面将消失。
为了更加直观的观察，如下图红色方块的旋转效果。
通过代码页可以看到，红色方块在绿色方块中hight：50px的位置按照X轴进行了旋转。通过观察可以发现红色方块是以绿色方块height：50px为X轴做旋转。
所以当绿色色块的opacity值小于1时，绿色色块的可见度为非实际可见。那么提供红色色块作为X轴旋转的像素点不可见，所以红色色块找不到X轴作为旋转轴。故而无法渲染旋转后的图形，因此无法显示为正常的正方体。所以才会出现原有的正方体发生崩塌，形成一个二维的方块。
结论：
当父级的opacity值小于1时
1、原来通过父级做为旋转参照的所有旋转面，无法正确找到旋转轴心，导致无法正常显示，产生图形丢失。
2、原来通过父级做为平移参照的所有图形，因为找不到正确的平移参照，产生塌陷，被压缩到同一平面。