一个盒子里面装两个同宽高的盒子，利用backface-visibility设置元素背面是否可见的属性，达到两面翻转的效果
<!DOCTYPE HTML><html>
<meta charset="UTF-8" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<head>
<style type="text/css">
body {
margin: 0
padding: 0
}
.box {
text-alien：center
/*段落居中*/
height: 300px
width: 300px
border: 1px solid #000
/*边框*/
box-shadow: 2px 2px 10px 3px #000
/*阴影*/
}
</style>
<script type="text/javascript">
</script>
<title>demo</title>
</head>
<body>
<div class="box">
</div>
</body>
</html>
animation-fill-mode : none | forwards | backwards | both
none：不改变默认行为。
forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both：向前和向后填充模式都被应用。
扩展资料：
CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块 。
CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时问支持不同特性，这也让跨浏览器开发变得复杂。
参考资料：百度百科-CSS3
