<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>CSS3鼠标悬停360度旋转效果 </title> <style> * { margin:0; padding:0; list-style:none; } body { background:#1F1F1F; } .zzsc { width:220px; height:220px; margin:0 auto; background:url(569d12756f794.jpg) no-repeat left top; -webkit-background-size:220px 220px; -moz-background-size:220px 220px; background-size:220px 220px; -webkit-border-radius:110px; border-radius:110px; -webkit-transition:-webkit-transform 2s ease-out; -moz-transition:-moz-transform 2s ease-out; -o-transition:-o-transform 2s ease-out; -ms-transition:-ms-transform 2s ease-out; } .zzsc:hover { -webkit-transform:rotateZ(360deg); -moz-transform:rotateZ(360deg); -o-transform:rotateZ(360deg); -ms-transform:rotateZ(360deg); transform:rotateZ(360deg); } </style> </head> <body> <div class="zzsc"> </div> <div style="text-align:center;clear:both;"> </div> </body> </html>
原文：http://www.cnblogs.com/jinsuo/p/6062957.html