相对于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>
CSS：
1 .transform-style .container { 2 width:500px; 3 height:300px; 4 margin:10px auto; 5 position:relative; 6 } 7 .transform-style .inner { 8 width:142px; 9 height:200px; 10 position:absolute; 11 } 12 //设置动画 13 @keyframes inner{ 14 0%{ 15 transform:rotateY(0deg) 16 } 17 100%{ 18 transform:rotateY(360deg) 19 } 20 } 21 //调用动画 22 .transform-style .inner:hover{ 23 animation:inner 5s linear infinite; 24 } 25 26 .transform-style .rotate { 27 background: url("http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg") no-repeat center; 28 border: 5px solid hsla(50,50%,50%,.9); 29 transform: perspective(200px) rotateY(45deg); 30 } 31 .transform-style .rotate img{ 32 border: 1px solid green; 33 transform: rotateX(15deg) translateZ(10px); 34 transform-origin: 0 0 40px; 35 } 36 //改变transform-style的默认值 37 .transform-style .three-d { 38 transform-style: preserve-3d; 39 }
