作者：华清远见讲师
我作为本文的页头，说太多废话没啥用，还可能被跳过，所以先上图给各位大大看一下最终效果。
是不是看着就像一张图片对不对?其实他是会旋转的，至于旋转画面，请各位大大自行脑补!或者看完本文自己写一个旋转的3D正方体。
效果给各位大大展示完，我们现在来看一下代码。
HTML代码
最外面一层为给整体内容加一个景深效果，与3D效果配合，让元素旋转拥有3D立体效果。
景深代码：perspective:属性值;
属性值为具体像素，属性值越小，景深效果越大。
3D代码：transform-style:preserve-3d;
3D属性需要与景深属性配合使用
注意：景深效果要加给要实现效果元素的父级!!!
CSS代码
其中的重点代码都已经全部标注了出来，至于基础的CSS代码样式作用我就不一一声明了。
在这呢，各位大大注意一下动画属性加给的元素是图片的父级，所以我们运动旋转的就只有一个div而已，而大大们看到的正方体在旋转只是因为他们的父级div在旋转罢了。
最终效果如下：
注意：以下为GIF动态图片。如不能正常观看，请保存到电脑上再打开。
文章选自华清远见嵌入式培训
>>>更多优秀技术博文每日更新
