CSS transform-style属性实现3D效果

相对于transform-style:flat，在2d平面呈现，transform-style:preserve-3d则将所有子元素呈现在3d空间中。

    实例：

    HTML：

 1 <div class="transform-style">
 2     <h3>鼠标放到图片上面来查看效果哦！(图片反转360度)</h3>
 3     <div class="container">
 4         <div class="inner">
 5             <div class="rotate">
 6                 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
 7             </div>
 8         </div>
 9     </div>
10 
11     <h3>鼠标放到图片上面来查看效果哦！(图片反转360度--使用transform-style: preserve-3d;效果)</h3>
12     <div class="container">
13         <div class="inner">
14             <div class="rotate three-d">
15                 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
16             </div>
17         </div>
18     </div>
19     </div>

View Code