鼠标悬停整体旋转

最新推荐文章于 2023-03-31 20:52:12 发布

GreenSo

最新推荐文章于 2023-03-31 20:52:12 发布

阅读量411

点赞数

分类专栏：前端文章标签：鼠标

本文链接：https://blog.csdn.net/qq_29262833/article/details/78574818

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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

<div class="style3">
    <h2>鼠标悬停整体旋转</h2>
    <ul>
    <li><img src="http://img1.gtimg.com/datalib_img/17-10-27/6/98410af9bb0b099e0464e278a00bcc214.jpg"></li>

    </ul>
</div>


</body>
</html>

GreenSo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标悬停整体旋转

<!doctype html><html><head><meta charset="utf-8"><title>鼠标悬停整体旋转</title><style type="text/css"> .style3 ul li{float:left;margin:0 6px; position:relative;/*绝对定位元素*/
复制链接

扫一扫

专栏目录