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>

 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     }