<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>拒绝IE8-,CSS3 transform rotate旋转动画效果（支持IE9+/chrome/firefox）</title> <style type="text/css"> .feature-box-image { margin: 0 auto 1em auto; 120px; height: 107px; overflow: hidden; } .cross-browser .feature-box-image{ background: url('http://www.iicoo.cn/demo/html5/feature-sprites.png') -278px 0px no-repeat; transition: all 0.4s; position: relative; z-index: 10; } .cross-browser .feature-box-image:hover { transition: all 0.7s; -webkit-transform: rotate(6.28rad); -ms-transform: rotate(6.28rad); transform: rotate(6.28rad); } </style> <script type="text/javascript"> // </script> </head> <body> <div class="feature-box cross-browser"> <div class="feature-box-image"></div> </div> </body> </html>