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