css中三维元素的定位

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

第一个问题（左轮）是方向盘在div中没有垂直居中。我可以使用translateY手动向下移动方向盘，但具体的平移量因设备而异（例如，PC上的Chrome与Android上的Chrome不同）。为什么车轮没有垂直居中

第二个问题（右车轮）是，如果我将车轮高度设置为1em以外的值，并沿X轴旋转车轮，车轮不会从其中心旋转，因此在div内似乎会摆动。这似乎很奇怪，因为车轮的高度实际上不是1em，而是3.077em。为什么会发生这种情况

此处完整的动画示例：。 无前缀版本（适用于Firefox）：

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;   
}

---

你问什么我一定很困惑。如果你说的是对中车轮，那么在“c1”中，只需使用：

margin:1.5em auto 0 auto
哇。。。这几乎是正确的，只是边距应该在.wheel上，而不是在#c1上。这里是一个更新的小提琴：