Css變換3d

Question

我試圖創建一個CSS開放書，但轉換似乎不起作用。 https://jsfiddle.net/g722fq84/

@-webkit-keyframes spincube { 
from,to {             } 
10%  { transform: rotateY(-90deg) translatex(60px) translatez(75px)  
} 

}

蓋的最終位置是好的，但蓋順利，剛開始時，我該如何解決？

Answer 1

除了在x和z軸上翻譯div，您可以指定transform origin。

.front { 
    -webkit-animation-name: spincube; 
    -webkit-animation-timing-function: ease-in-out; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-duration: 2s; 
    transform-origin: left; 
} 

更新的jsfiddle： https://jsfiddle.net/g722fq84/2/