码迷,mamicode.com
首页 > 其他好文 > 详细

360度 图片 旋转

时间:2016-11-14 19:51:20      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:class   blog   doc   center   auto   zh-cn   color   web   out   

<!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>

 

360度 图片 旋转

标签:class   blog   doc   center   auto   zh-cn   color   web   out   

原文地址:http://www.cnblogs.com/jinsuo/p/6062957.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!