踩了不少坑,這里都寫出來就當給大家拋磚引玉了。
section { position: relative; top: 0; left: 0; width: 300px; height: 300px; transform-style: preserve-3d; animation: rotate 5s linear infinite; background: url("image/dogy1.jpg"); } section div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("image/dogy.jpg") no-repeat; } section div:nth-child(1) { transform: rotateY(0) translateZ(400px); } section div:nth-child(2) { transform: rotateY(60deg) translateZ(400px); } section div:nth-child(3) { transform: rotateY(120deg) translateZ(400px); } section div:nth-child(4) { transform: rotateY(180deg) translateZ(400px); } section div:nth-child(5) { transform: rotateY(240deg) translateZ(400px); } section div:nth-child(6) { transform: rotateY(300deg) translateZ(400px); } @keyframes rotate { 0% { transform: rotateY(0); } 100% { transform: rotateY(-360deg); } }
本身算是比較簡單的,成品效果如下:
需要注意的有:
1、對於這樣的旋轉圖,可以先進行【旋轉】再進行【位移】,因為元素的參考坐標軸永遠是他自己的中心處——如果不做修改的話。因此將其旋轉后,再做位移就能完美得移動到想要的位置了。
譬如這里,外圈是有6張圖片。一開始我想着是正六邊形,那么第一張正對的圖片就要往z軸移動 √3倍 邊長了……
其余的圖片雖然有對稱能夠根據這個推算出來移動距離,但也很難讓他們看上去是一個【整體】,因此最好先旋轉后位移。
2、最好嵌套一個父盒子
<div>子元素早已定好了位置,我們這里是對<section>元素進行旋轉動畫所以看上去是都在動——相對靜止。
如果此時想要對 <section> 盒子本身作定位,抑或是在正常文檔流之下布置其他元素,讓頁面變高,都會使得這個旋轉動畫變得十分鬼畜……(或許因為是沿着y軸旋轉,所以和高度相關吧,如果是x軸水車式的動畫的話,可能就和寬度有關了吧)
譬如預先設置了頁面高度(或者說動畫下方有其他元素撐高)
body { height: 2000px; perspective: 1000px; }
這里就是頁面高度太高,以至於旋轉變得很奇怪。如果你還把透視(perspective)設置得過低,那么整個動畫將幾乎覆蓋整個頁面……
同時,設置父盒子也便於使整個動畫定位。如果你是給動畫盒子<section>本身設置定位的話,定位將會失效。
總之設置一個父盒子就完事兒了。
.elevator { position: fixed; top: 100px; left: 100px; perspective: 300px; }
如果不需要看到旋轉到后方圖片得背面,那么可以給盒子設置
section div { …… backface-visibility: hidden; }
這個屬性會使得盒子背面面向屏幕時,隱藏自身。因為大部分時候圖片也好文字也好,旋轉過去后的背面實際上是鏡面反轉了,所以可以考慮隱藏。
翻轉圖片也是需要設置這個屬性,才能讓前面的這個翻轉過去后消失,留下“之前的背面元素”