css效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.box{
margin:100px;
width:200px;
height:100px;
background:#ccc;
color:#fff;
perspective:4000px;
position:relative;
}
.box div{
width:200px;
height:100px;
background:#87D30A;
transition: transform .5s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.box div:hover{
transform: translateZ(50px) rotateX(90deg);
}
.box img{
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
transform: translateZ(50px);
transition: all .6s;
}
.box span{
position:absolute;
top:0px;
left:0px;
display: block;
height:100px;
width:200px;
background: #f60;
transform: rotateX(-90deg) translateZ(50px);
transition: all .6s;
}
</style>
<body>
<div class="box">
<div>
<img src="http://pic6.qiyipic.com/image/20140303/da/e9/aa/v_105073913_m_601_180_101.jpg" />
<span>内容内容</span>
</div>
</div>
</body>
</html>
