2016-08-09 16:06:10 div CSS3 鼠标悬停图片360度旋转js特效一个用HTML5/css3写成的图片旋转特效，鼠标放上后图片就开始不停的旋转，对CSS3动画效果感兴趣的，更不可错过哦，用CSS3实现动画效果很不错的范例。
一个用HTML5/css3写成的图片旋转特效，鼠标放上后图片就开始不停的旋转，对CSS3动画效果感兴趣的，更不可错过哦，用CSS实现动画效果很不错的范例。
以下为CSS3实现图片旋转全部代码：
- <!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;}
.exp{width:220px;height:220px;margin:0 auto;
background:no-repeat url("//www.html8.com.cn/imgthink2015/logo.gif") 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;}
.exp: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="exp"></div>
- <div style="text-align:center;clear:both;"> </div>
- </body>
- </html>
以上HTML5 CSS3代码实现图片360旋转，鼠标经过悬停图片时候图片360旋转。关键点：图片设置为背景图片，让CSS3设置hover 图片CSS3样式 旋转样式实现。