<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul,li {
margin:0;
padding:0;
list-style:none;
}
#content ul li{
225px;
height: 180px;
}
#content ul li a{
position: relative;
display: block;
100%;
height: 100%;
}
#content ul li a > div{
position: absolute;
left: 0;
height: 0;
100%;
height: 100%;
color: #fff;
}
#content ul li a div:first-child{
background-color: rgb(255, 64, 129);
z-index:2;
}
#content ul li a div:last-child{
background:rgb(0, 188, 212);
z-index:1;
}
#content ul li a div h3{
margin: 0 auto 15px;
padding: 15px 0;
200px;
height: 16px;
line-height: 16px;
font-size: 14px;
text-align: center;
border-bottom: 1px #fff dashed;
}
#content ul li a div p{
padding: 0 10px;
font-size: 12px;
text-indent: 2em;
line-height: 18px;
}
#content ul li a > div{
-webkit-transition:.8s ease-in-out;
}
#content ul li a div:first-child{
-webkit-transform:rotateY(0);
}
#content ul li a div:last-child{
-webkit-transform:rotateY(180deg);
}
#content ul li a:hover div:first-child{
-webkit-transform:rotateY(-180deg);
}
#content ul li a:hover div:last-child{
-webkit-transform:rotateY(0);
}
#content ul li a > div{
-webkit-backface-visibility: hidden;
}
#content ul li a{
-webkit-perspective: 800px;
}
</style>
</head>
<body>
</body>
</html>
<div id="content">
<ul>
<li>
<a href="#" >
<div>
<h3>测试正面1</h3>
<p>文字文字文字文字文字文字文字文字文字文字文字</p>
</div>
<div>
<h3>测试背面1</h3>
<p>文字文字文字文字文字文字文字文字文字文字文字</p>
</div>
</a>
</li>
</ul>
</div>