我在 div 中定位 3d 转换元素时遇到两个问题。在下图中，粉色方块是 10 面“轮子”的容器。透视原点设置在每个 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;
}