css中3d元素的定位

我在定位div中的3d轉換元素時遇到了兩個問題。在下圖中，粉色方塊是10面「輪子」的容器。透視原點設置在每個div的中間。css中3d元素的定位

Screenshot

的第一個問題（左車輪）是所述車輪不豎直在div居中。我可以使用translateY人爲地將輪子向下移動，但翻譯的精確數量因設備而異（例如，與PC上的Chrome和Android上的Chrome不同）。爲什麼輪子不是垂直居中？

第二個問題（右輪）是，如果我將輪子的高度設置爲1em以外的其他輪子並沿X軸旋轉輪子，則輪子不會從其中心旋轉，因此看起來會在其內部擺動div。這看起來很奇怪，因爲車輪的高度確實不是1em，而是3.077em。爲什麼會發生？

完整動畫示例：http://jsfiddle.net/dhApe/2/。無前綴版本（可在火狐）：http://jsfiddle.net/dhApe/3/

主要CSS規則：

.wheel-container { 
    position: absolute; 
    top: 4em; 
    height: 4em; 
    width: 4em; 
    background: pink; 
    -webkit-perspective: 5em; 
    -webkit-perspective-origin: 50% 50%; 
} 

.wheel { 
    position: relative; 
    margin: 0 auto; 
    width: 1em; 
    height: 1em; 
    -webkit-transition: -webkit-transform 0.5s linear; 
    -webkit-transform-style: preserve-3d; 
}

來源

2013-04-28 gpothier

我必須對你的要價相混淆。如果你談論的是車輪居中，那麼在「c1」中，只需使用：margin: 1.5em auto 0 auto;

來源

2013-04-29 02:09:02 Xarcell

哇......它幾乎是正確的，只是保證金應該在.wheel上，而不是在＃c1上。這是一個更新的小提琴：http://jsfiddle.net/dhApe/5/ – gpothier 2013-04-29 05:30:40

css中3d元素的定位

回答

相關問題