css3 3d旋转图片立方体特效代码

纯 CSS3 3D 旋转立方体动画特效，该 3D 立方体使用 CSS3 perspective 制作，可以在水平方向、垂直方向和平面视角方向旋转，使用 CSS 来制作立方体动画，效果非常好。下面来看看制作方法。
HTML 结构
立方体结构中，使用一个 wrapper div 来包裹立方体。在里面使用 6 个 div 来制作立方体的 6 个面。

<div class="wrap">    
	<div class="cube">        
	<div class="front">front</div>        
	<div class="back">back</div>        
	<div class="top">top</div>        
	<div class="bottom">bottom</div>        
	<div class="left">left</div>        
	<div class="right">right</div>    
	</div>
</div>

分别为立方体的六个面，使用 CSS 来将立方体的 6 个面放置到正确的位置上
CSS 样式
设置景深（perspective）：观察距离，更好的体现立体性
和变换原点（perspective-origin）：变换属性的原点

.wrap {
     perspective: 800px; perspective-origin: 50% 100px;}

给包含立方体 6 个面的立方体的容器.cube 提供样式：

.cube {
       
   /*添加相对定位*/
   position