* {
	/*清除默认样式*/
    margin:0;
	padding:0;
	list-style:none;
	border:0;
}
ul {
	/*设置大盒子的大小，背景颜色，居中*/
    width:600px;
	background:#F90;
	color:#fff;
	margin:50px auto;
}
li {
	/*设置小盒子的大小，向左浮动，保存嵌套元素的3D空间 ，3D距离*/
    width:150px;
	height:40px;
	transition:all 0.4s ease 0s;
	float:left;
	position:relative;
	transform-style:preserve-3d;
	perspective:6000px
}
li:hover {
	/*使他沿X轴逆旋转90度*/
    transform:rotateX(-90deg);
}
span {
	/*设置盒子大小，行高，字体居中，绝对定位*/
    width:150px;
	height:40px;
	line-height:40px;
	text-align:center;
	position:absolute;
	top:0;
	left:0;
}
li .yangshi1 {
	background:#F60;
	transform:translateZ(20px);
}
li .yangshi2 {
	background:#39F;
	transform:rotateX(90deg) translateZ(20px);
}