直接上代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无标题文档</title> <style> body { background:#ddd; } .rotate{ width: 220px; height: 220px; margin: 0 auto; background: no-repeat url("http://keleyi.com/image/a/q5l1xnmf.jpg") 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; } .rotate:hover { cursor: pointer; -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); transform: rotateZ(360deg); } </style> </head> <body> <div class="rotate"></div> </body> </html>
OK！