鼠标悬停图片整体旋转效果
程序员文章站
2022-06-27 14:57:07
鼠标悬停图片整体旋转效果
鼠标悬停图片整体旋转效果
<!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>