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元素的定位

回答

相关问题