CSS3实现嵌套立方体旋转的3D效果_html/css_WEB-ITnose

这样的3D透视效果主要是用了perspective和transform-style: preserve-3d;这两个属性。然后在相应的元素上添加transform就行了。

先看一下布局结构：

container放在页面的适当位置，box放在container的中间位置。cube_1是外面的小正方体，cube_2是外面的小正方体。设置 ul 和 li 的position为absolute，居中定位，然后让每张图片绕Y轴或X轴旋转相应的角度，然后向Z轴移动相应的距离。布局完成后添加相应的动画，和鼠标移入的变化。

注意点：perspective和transform-style这两个属性我分别用在了cube_1和cube_2上面，设置透明度显示出来之后外面的立方体对里面的立方体没有遮挡的效果，我想这应该是cube_1和cube_2分别使用上述两个属性导致隔离开来互不影响的结果，然后又给container添加了transform-style:preserve-3d;发现遮挡效果出现了。问题解决。

代码写的有点乱，也比较臃肿：

  1   2   3   4       5       6   7 146 147     
148         
149             
150                 
151                 
152                 
153                 
154                 
155                 
156             
157             
158                 
159                 
160                 
161                 
162                 
163                 
164             
165         
166     
167 168