CSS3变换不会改变元素的左侧位置?
有人可以解释为什么使用以下 CSS 代码不会改变元素的左侧位置吗?
element {
-webkit-transform:translate3d(200px,0,0);
}
这以不同的方式执行相同的操作,但更改了左侧位置:
element {
position:absolute;
left:200px;
}
我选择了第一种方法与 CSS3 转换相结合,以触发移动 Safari 上的硬件加速。
编辑 一些澄清:看起来转换改变了左侧位置,但如果你想用 Javascript 获取左侧位置,它会返回 0。
Can someone explain why using the following CSS code doesn't change an element's left position?
element {
-webkit-transform:translate3d(200px,0,0);
}
This does the same in a different way but changes the left position:
element {
position:absolute;
left:200px;
}
I have chosen the first method in combination with CSS3 transitions to trigger hardware acceleration on mobile Safari.
EDIT
Some clarification: it looks like transform changes the left position but if you want to get the left position with Javascript it returns 0.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
位置变换(又称翻译)不会更改元素的报告位置,这是正确的行为。当您变换元素时,您会创建一个新的局部坐标系,该坐标系不会反映在左/右属性(或任何其他属性),因为就页面的其余部分而言,元素仍处于其原始位置(又名 - 当您转换元素时,页面不会回流以反映其新位置) 。当你考虑scales.skews等——你可以用变换做的其他事情时,这是有道理的。
更新:如果您想做繁重的工作,当前应用的变换矩阵通过 window.getCompulatedStyle() 报告
更新:有人指出 getBoundingBox 现在可以正确调整变换和平移
Position transforms (aka translations) do not change the reported position of an element and this the correct behavior. When you transform an element you create a new local coordinate system that is not reflected in left/right properties (or any other properties) since as far as the rest of the page is concerned the element is still in its original position (aka - when you transform an element, the page doesn't reflow to reflect its new position). This makes sense when you think about scales.skews etc. - the other stuff that you can do with transforms.
Update: if you want to do the heavy lifting, the currently applied transformation matrix is reported via window.getComputedStyle()
Update: someone pointed out that getBoundingBox now correctly adjusts for transforms and translations