Web前端技术：图片翻转案例
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>图片翻转</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
body{
background-color:#063462;
}
#stage{
width:760px;
height:220px;
margin:100px auto;
}
.box{
float:left;
width:170px;
height:190px;
margin:10px;
position:relative;
transform-style:preserve-3d;
transition:0.6s linear;
}
.box:hover{
transform:rotateY(180deg);
}
img{
width:170px;
height:190px;
position:relative;
}
.face{
width:170px;
height:190px;
position:absolute;
}
.front{
background-color:#4b2518;
}
.back{
background-color:#4b2518;
border:2px solid #fff;
transform:rotateY(180deg);
}
.back h3{
color:white;
text-align:centers;
}
</style>
</head>
<body>
<div id="stage">
<div class="box">
<div class="face front"><img src="big1.jpg"></div>
<div class="face back"><h3>图片1</h3></div></div>
<div class="box">
<div class="face front"><img src="big2.jpg"></div>
<div class="face back"><h3>图片2</h3></div>
</div>
<div class="box">
<div class="face front"><img src="big3.jpg"></div>
<div class="face back"><h3>图片3</h3></div>
</div>
</div>
</body>
