css3图片翻转
<!DOCTYPE>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3旋转效果</title>
<style type="text/css">
*{
margin:0;
padding:0;
list-style:none;
font-family: 微软雅黑;
}
body{
background:orange;
}
#main{
width:1280px;
height:473px;
margin:10px auto;
}
#main ul li{
width:320px;
height:470px;
margin-left: 8%;
float:left;
position:relative;
}
#main ul li img{
border:10px solid darkturquoise;
-webkit-transition:1s ease;
-moz-transition:1s ease;
}
#main .info{
width:240px;
height:230px;
border:10px solid blueviolet;
background:#deddcd;
position:absolute;
bottom:-30px;right:0;
-webkit-transition:1s ease;
-moz-transition:1s ease;
-moz-transform:rotatey(30deg);
-webkit-transform:rotatey(30deg);
}
#main .info h2{
text-align:center;
line-height:70px;
color:#7a3f3a;
font-weight:normal;
font-size:20px;
}
#main .info p{
padding:0 20px;
font-size:14px;
}
#main .info a{
display:block;
width:100px;
height:30px;
background:blue;
color:#FFF;
border-radius:5px;
text-decoration:none;
text-align:center;
line-height:30px;
margin:10px auto;
}
#main ul li:hover .info{
-webkit-transform:rotatey(0deg);
-moz-transform:rotatey(0deg);
right:30px;
bottom:-50px;
}
#main ul li:hover img{
-webkit-transform:rotatey(360deg);
-moz-transform:rotatey(360deg);
}
</style>
</head>
<body>
<div id="main">
<ul>
<li> <img src="img/I-1.jpg" width="300" height="450" />
<div class="info">
<h2>旺财</h2>
<p>忧伤的旺财</p>
<a href="#">点击进入</a>
</div>
</li>
<li> <img src="img/I-2.jpg" width="300" height="450" />
<div class="info">
<h2>竹林</h2>
<p>翠绿的竹林</p>
<a href="#">点击进入</a>
</div>
</li>
<li> <img src="img/I-3.jpg" width="300" height="450" />
<div class="info">
<h2>光明</h2>
<p>有光的地方就有希望</p>
<a href="#">点击进入</a>
</div>
</li>
</ul>
</div>
</body>
</html>
web前端免费学习资料，搜【WEB前端互动交流群】
