<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>放大旋转动画DEMO演示</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
/* background: url(../images/bodyBg.jpg) repeat; */
}
.nav{
width: 90%;
margin: 0 auto;
margin-top: 100px;
height: 255px;
overflow: hidden;
}
.nav ul{ }
.nav ul li{
position: relative;
float: left;
width: 210px;
margin-top: 70px;
height: 120px;
text-align: center;
list-style: none;
margin-left: 20px;
background: rgba(0, 0 ,0 ,0.5);
}
.nav ul li:before{
content: "";
width: 210px;
height: 120px;
background: rgba(0,0,0,0.5);
position: absolute;
top: 0;
left: 0;
transform: rotate(60deg);
-webkit-transform: rotate(60deg);
z-index:-1;
}
.nav ul li:after{ content: "";
width: 210px;
height: 120px;
background: rgba(0,0,0,0.5);
position: absolute;
top: 0;
left: 0;
transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
z-index:-1;
}
.nav ul li img{
transition: 1s;
-webkit-transition: 1s;
display: block;
margin: 21px auto;
z-index:2;
}
.nav ul li img:hover{
transform:rotate(360deg) acale(1.5);
-webkit-transform:rotate(360deg) scale(1.5);
-moz-transform:rotate(360deg) acale(1.5);
-ms-transform:rotate(360deg) acale(1.5);
} </style>
</head>
<body>
<div class="nav">
<ul>
<li><img src="data:images/1.png"/></li>
<!-- <li><img src="data:images/2.png"/></li>
<li><img src="data:images/3.png"/></li>
<li><img src="data:images/4.png"/></li>
<li><img src="data:images/5.png"/></li> -->
</ul>
</div> </body>
</html>
鼠标移到中间图片会有放大旋转效果