使用css3轉換創建一個立方體

Question

我想創建一個「立方體」效果，我可以在三個對象之間切換並創建轉動立方體的感覺。

工作正常與2方，但我卡住試圖增加第三。有人可以解釋爲什麼第三個網站漂走了嗎？

我想我在做項目3時出錯了嗎？可我就是想不通

.item-1{ 
    -webkit-transform: translateZ(50px); 
    transform: translateZ(50px); 
} 

.item-2{ 
    -webkit-transform: rotateX(-90deg) translateZ(-50px); 
    transform: rotateX(-90deg) translateZ(-50px); 
} 

.item-3{ 
    -webkit-transform: rotateX(-180deg) translateZ(-50px); 
    transform: rotateX(-180deg) translateZ(-50px); 
} 

活生生的例子： http://jsfiddle.net/esbeka9t/

Answer 1

你去那裏：

只要改變你的.item-3級這樣的：

-webkit-transform: translateZ(-50px) rotateX(-180deg) translateY(200px); 
transform: translateZ(-50px) rotateX(-180deg) translateY(200px) 

Answer 2

看來你.items定位彼此相對。給予.item一個position: absolute，固定width，改變你的.item類translate值只是有點要解決的問題。 Here是你的例子的一個修改版本來說明這一點。