当前位置： 移动技术网 > IT编程>网页制作>CSS > 鼠标悬停图片整体旋转效果

鼠标悬停图片整体旋转效果

2019年06月02日  | 移动技术网IT编程  | 我要评论

鼠标悬停图片整体旋转效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标悬停整体旋转</title>
<style type="text/css">
            .style3 ul li{float:left;margin:0 6px;
            position:relative;/*绝对定位元素*/
            list-style:none}
            .style3 ul li{ -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s;}
            .style3 ul li:hover { transform:rotate(360deg);
                                 -webkit-transform:rotate(360deg);
                                  -moz-transform:rotate(360deg);
                                  -o-transform:rotate(360deg);    /*css3旋转属性； 360deg（顺时针旋转360度）*/
                                  -ms-transform:rotate(360deg);}


            /*****鼠标悬停整体旋转放大*****/
</style>
</head>

<body>

<p class="style3">
    <h2>鼠标悬停整体旋转</h2>
    <ul>
    <li><img src=https://www.2cto.com/uploadfile/2017/1120/20171120014506209.jpg"></li>

    </ul>
</p>


</body>
</html>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网