示例代码：
<html>
<head>
<meta charset="utf-8">
<title>漂亮的CSS3翻牌效果 CMS集中营 www.cmsjzy.cn</title>
</head>
<style type="text/css">
body, form, ul, li, ol, p, em, label, input, span, object, dl, dt, dd, table, tr, td, div, select, option, button {
margin: 0px;
padding: 0px;
outline: none;
font-family: 'Microsoft Yahei', '宋体', '黑体';
}
body {
color: #8a817a;
font-size: 12px;
background: #fff;
}
ol, ul {
list-style: none;
}
em, i {
font-style: normal;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-size: 100%;
margin: 0;
padding: 0;
}
img {
border: 0;
vertical-align: top;
}
input {
vertical-align: middle;
}
.mart {
margin-top: 10px;
}
.marb {
margin-bottom: 10px;
}
.fl {
float: left;
}
.fr {
float: right;
}
.of {
overflow: hidden;
}
.cl {
clear: both;
font-size: 0;
}
.cf {
overflow: hidden;
_zoom: 1;
}
.tl {
text-align: left;
}
.tc {
text-align: center;
}
.tr {
text-align: right;
}
.block {
display: block;
}
.hidden, .hide {
display: none;
}
a, a:visited {
text-decoration: none;
color: #330000;
}
body {
font-size: 14px;
font-family: Microsoft YaHei, Tahoma, Geneva, sans-serif;
background: #111;
}
#content ul {
width: 960px;
margin: 150px auto;
padding: 60px 0;
}
#content ul li {
margin-right: 20px;
width: 225px;
height: 180px;
float: left;
}
#content ul li:last-child {
margin-right: 0;
}
#content ul li a {
position: relative;
display: block;
width: 100%;
height: 100%;
/*舞台（动画元素的父容器）perspective*/
-webkit-perspective: 800px;
-moz-perspective: 800px;
}
#content ul li a > div {
position: absolute;
left: 0;
height: 0;
width: 100%;
height: 100%;
color: #fff;
/*动画元素transform-style*/
-webkit-transform-style: preserve-3d;
-webkit-transition: .8s ease-in-out;
/*动画元素背后设置为hidden*/
-webkit-backface-visibility: hidden;
}
#content ul li a div:first-child {
/*绕y轴旋转*/
-webkit-transform: rotateY(0);
z-index: 2;
}
#content ul li a div:last-child {
background: url("images/bg.jpg") no-repeat 0 0;
-webkit-transform: rotateY(180deg);
z-index: 1;
}
#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 h3 {
margin: 0 auto 15px;
padding: 15px 0;
width: 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;
}
</style>
<body>
<div id="content">
<ul>
<li> <a href="http://www.moke8.com/" target="_blank">
<div><img alt="CMS集中营" src="images/1.jpg"/></div>
<div>
<h3>CMS集中营</h3>
<p>CMS集中营 http://www.moke8.com/ 学习php技术及相关CMS、商城、论坛、博客等的技术网站，还有很多的精品模板哦。QQ交流群：292800309</p>
</div>
</a> </li>
<li> <a href="http://www.moke8.com/" target="_blank">
<div> <img alt="CMS集中营" src="images/2.jpg"/> </div>
<div>
<h3>烈鹰网络工作室</h3>
<p>烈鹰网络工作室承接建站、仿站任务，期待与您的真诚合作！QQ：464696980 QQ交流群:292800309</p>
</div>
</a> </li>
<li> <a href="http://www.moke8.com/" target="_blank">
<div><img alt="" src="images/3.jpg"/></div>
<div>
<h3>CMS集中营</h3>
<p>CMS集中营 http://www.moke8.com/ 学习php技术及相关CMS、商城、论坛、博客等的技术网站，还有很多的精品模板哦。QQ交流群：292800309</p>
</div>
</a> </li>
<li> <a href="http://www.moke8.com/" target="_blank">
<div> <img alt="" src="images/4.jpg"/> </div>
<div>
<h3>烈鹰网络工作室</h3>
<p>烈鹰网络工作室承接建站、仿站任务，期待与您的真诚合作！QQ：464696980 QQ交流群:292800309</p>
</div>
</a> </li>
</ul>
</div>
</body>
</html>
