1.基本结构如下
代码语言：javascript复制<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
ul{
margin:100px auto
}
ul li {
width: 120px;
height: 35px;
list-style: none;
}
.box{
width: 100%;
height: 100%;
position: relative;
}
.front,.back{
position: absolute;
left:0;
top:0;
width: 100%;
height: 100%;
text-align: center;
line-height: 35px;
}
.front{
background-color: red;
z-index: 1;
}
.back{
}
</style>
</head>
<body>
<ul>
<li>
<div class="box">
<div class="front">正面</div>
<div class="back">反面</div>
</div>
</li>
</ul>
</body>
</html>
2.使另一个盒子扑到
代码语言：javascript复制...
ul li {
...
perspective: 500px;
}
.box{
...
transform-style: preserve-3d;
}
.back{
background-color: green;
/* 另一个盒子扑到 */
transform: rotateX(-80deg);/*（-90）*/
}效果如下，为了演示方便我们使back盒子旋转了-80度，实际上应该旋转-90度，但是-90度的时候显示一根线看不出来效果
3.使绿色盒子至于底部
代码语言：javascript复制...
.back{
background-color: green;
/* 1.另一个盒子扑到 */
/* 2.盒子至于底部(先移动后旋转)*/
transform:translateY(17.5px) rotateX(-80deg);
}我们将绿色盒子向y轴方向移动红色盒子高度的一半
4.使两个盒子底部重合
将红色盒子z轴方向正值移动绿色盒子高度一半即可实现重合
代码语言：javascript复制...
.front{
background-color: red;
z-index: 1;
transform: translateZ(17.5px);
}
...
5.父盒子经过时x轴旋转90度
代码语言：javascript复制...
.box{
...
transition: all 0.3s;
}
.back{
background-color: green;
/* 1.另一个盒子扑到 */
/* 2.盒子至于底部()*/
transform:translateY(17.5px) rotateX(-90deg);/*改回-90度*/
}
.box:hover{
transform: rotatex(90deg);
}效果如下
