如何旋轉和翻譯一個CSS三維立方體？

Question

我想旋轉一個立方體，更具體地說，從這個嘖嘖的一個：http://desandro.github.com/3dtransforms/examples/cube-02-show-sides.html 說我想從邊1到邊3.現在，我想實現的是不僅旋轉立方體，而且還翻譯它（在x軸上移動它）。例如，當旋轉結束時，立方體會向右移動20px（直到旋轉一半），然後移動20px（回到其原始位置）。我嘗試以下，但我想有什麼東西錯了，（我在這裏省略的CSS前綴）：

#cube.show-right { 
    transform: translateX(20px) translateZ(-100px) rotateY( -90deg) translateX(-20px) 
} 

任何想法如何執行呢？謝謝！

Answer 1

我相信你的例子中的x-翻譯相互抵消（你告訴立方體移動到右邊20px和左邊20px）。

爲了完成你要做的事（在旋轉的前半部分向右滑動，在下半部分向左滑動），我會將該立方體放入包含兩個翻譯動畫的包裝div中，第二個延遲（有關如何延遲轉換的說明，請參見here）。這兩個動畫應該都是立方體旋轉持續時間的一半。

希望這會有所幫助！