<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.wrap{
width:500px;
height:300px;
margin:0 auto;
-webkit-perspective:800px;
-webkit-perspective-origin:50% 50%;
-webkit-transition: all .6s;
position:relative;
}
.cont{
height:300px;
-webkit-transform-style: preserve-3d;
}
.cont: hover{ -webkit-transform: translateZ(-150px) rotateX(90deg); }
.cont img{
display:block;
position:absolute;
-webkit-transform:translateZ(150px);
width:100%;
height:100%;
}
.cont content1{
display:block;
background:#666;
position:absolute;
font-size:50px;
color: #000;
line-height:300px;
-webkit-transform:rotateX(-90deg) translateZ(150px);
}
</style>
</head>
<body>
<div class="wrap">
<div class="cont">
<img src="jj.jpg" />
<span class="content1">几ljajj</span>
</div>
</div>
</body>
</html>
display:'inline-block';或者block