码迷,mamicode.com
首页 > Web开发 > 详细

css3简单旋转

时间:2018-09-30 14:58:39      阅读:234      评论:0      收藏:0      [点我收藏+]

标签:utf-8   type   旋转   jpg   body   res   css   margin   pre   

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
.img{
width:1200px;
height:300px;
border:1px solid red;
margin:auto;
}
li{
list-style:none;
float:left;
margin-left:15px;
-webkit-transform-style:preserve-3d;-webkit-transition:1.5s;
-moz-transform-style:preserve-3d;-moz-transition:1.5s;
}

li:hover{
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
}
</style>
<body>
<ul class="img">
<li><img src="images/img1.jpg"></li>
<li><img src="images/img2.jpg"></li>
<li><img src="images/img3.jpg"></li>
<li><img src="images/img4.jpg"></li>
</ul>
</body>
</html>

css3简单旋转

标签:utf-8   type   旋转   jpg   body   res   css   margin   pre   

原文地址:https://www.cnblogs.com/mcll/p/9729140.html

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