* {
	margin:0;
	padding:0;
}
html {
	background-color:rgb(240,130,57);
}
/* 
那么问题来了,这个perspective是加在哪个位置呢？

假设我们加在ul上面，那么我们的图片开始转动的时候（即转动ul==>raotateY()）

那么我们的视角和上面说的translate的坐标一样会随的图片的转动而变化。

然后出现奇葩的图片。

因此我们需要在ul外面加一个box给box加视角perspective。

这样弄的话视角就永远不会变动，因为转动的是box。 
*/

.box {
	width:133px;
	height:200px;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	perspective:3000px;
	transform-style:preserve-3d;
}
ul {
	transform-style:preserve-3d;
	transform:rotateX(-35deg);
	width:133px;
	height:200px;
	border:2px solid rgb(77,177,20);
	box-shadow:2px 2px 5px #fff;
}
li {
	list-style:none;
	position:absolute;
	width:133px;
	height:200px;
	box-shadow:2px 2px 5px #fff;
}
li:nth-of-type(1) {
	animation:myAni1 3s linear forwards;
}
li:nth-of-type(2) {
	animation:myAni2 3s linear forwards;
}
li:nth-of-type(3) {
	animation:myAni3 3s linear forwards;
}
li:nth-of-type(4) {
	animation:myAni4 3s linear forwards;
}
li:nth-of-type(5) {
	animation:myAni5 3s linear forwards;
}
li:nth-of-type(6) {
	animation:myAni6 3s linear forwards;
}
li:nth-of-type(7) {
	animation:myAni7 3s linear forwards;
}
li:nth-of-type(8) {
	animation:myAni8 3s linear forwards;
}
li:nth-of-type(9) {
	animation:myAni9 3s linear forwards;
}
li:nth-of-type(10) {
	animation:myAni10 3s linear forwards;
}
li:nth-of-type(11) {
	animation:myAni11 3s linear forwards;
}
li:nth-of-type(12) {
	animation:myAni12 3s linear forwards;
}
@keyframes myAni1 {
	0% {
	transform:rotateY(0) translateZ(0);
}
100% {
	transform:rotateY(360deg) translateZ(400px);
}
}@keyframes myAni2 {
	0% {
	transform:rotateY(0) translateZ(0);
}
100% {
	transform:rotateY(330deg) translateZ(400px);
}
}@keyframes myAni3 {
	0% {
	transform:rotateY(0) translateZ(0);
}
100% {
	transform:rotateY(300deg) translateZ(400px);
}
}@keyframes myAni4 {
	0% {
	transform:rotateY(0) translateZ(0);
}
100% {
	transform:rotateY(270deg) translateZ(400px);
}
}@keyframes myAni5 {
	0% {
	transform:rotateY(0) translateZ(0);
}
100% {
	transform:rotateY(240deg) translateZ(400px);
}
}@keyframes myAni6 {
	0% {
	transform:rotateY(0) translateZ(0);
}
100% {
	transform:rotateY(210deg) translateZ(400px);
}
}@keyframes myAni7 {
	0% {
	transform:rotateY(0) translateZ(0);
}
100% {
	transform:rotateY(180deg) translateZ(400px);
}
}@keyframes myAni8 {
	0% {
	transform:rotateY(0) translateZ(0);
}
100% {
	transform:rotateY(150deg) translateZ(400px);
}
}@keyframes myAni9 {
	0% {
	transform:rotateY(0) translateZ(0);
}
100% {
	transform:rotateY(120deg) translateZ(400px);
}
}@keyframes myAni10 {
	0% {
	transform:rotateY(0) translateZ(0);
}
100% {
	transform:rotateY(90deg) translateZ(400px);
}
}@keyframes myAni11 {
	0% {
	transform:rotateY(0) translateZ(0);
}
100% {
	transform:rotateY(60deg) translateZ(400px);
}
}@keyframes myAni12 {
	0% {
	transform:rotateY(0) translateZ(0);
}
100% {
	transform:rotateY(30deg) translateZ(400px);
}
}