* { 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); } }
内蒙古十一选五的走势图百度乐彩网 www.cyiqh.com 更新時間:2019-11-25 09:55:13
那么問題來了,這個perspective是加在哪個位置呢? 假設我們加在ul上面,那么我們的圖片開始轉動的時候(即轉動ul==>raotatey()) 那么我們的視角和上面說的translate的坐標一樣會隨的圖片的轉動而變化。 然后出現奇葩的圖片。 因此我們需要在ul外面加一個box給box加視角perspective。 這樣弄的話視角就永遠不會變動,因為轉動的是box。