在css中定位3d元素

Question

我在div中定位了一个3d变换元素有两个问题。在下图中，粉红色方块是10面＆＃34;轮子的容器＆＃34;。透视原点设置为每个div的中间。

第一个问题（左轮）是轮子在div中没有​​垂直居中。我可以使用translateY来人为地移动方向盘，但翻译的确切数量因设备而异（例如，与PC上的Chrome和Android上的Chrome不同）。为什么车轮不垂直居中？

第二个问题（右轮）是如果我将车轮的高度设置为1em以外的其他值并沿X轴旋转车轮，则车轮不会从其中心旋转，因此看起来在车轮内摆动DIV。这看起来很奇怪，因为车轮的高度确实不是1em，而是3.077em。为什么会这样？

在此完成动画示例：http://jsfiddle.net/dhApe/2/。 无前缀版本（适用于Firefox）：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;   
}

Answer 1

我必须对你的要求感到困惑。如果您谈论的是车轮定心，那么在“c1”中，只需使用：margin: 1.5em auto 0 auto;