* {
	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);
}
}