css中3d元素的定位

Question

我在 div 中定位 3d 转换元素时遇到了两个问题。在下图中，粉色方块是 10 面“轮子”的容器。透视原点设置在每个 div 的中间。

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

第二个问题（右轮）是，如果我将轮子的高度设置为 1em 以外的值并沿 X 轴旋转轮子，轮子不会从其中心旋转，因此看起来会在分区。这看起来很奇怪，因为轮子的高度真的不是 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;