位置:相对vs转换:翻译 [英] Position: relative vs Transform: translate

问题描述

例如，如果我们想将元素向上移动50px，则上述两种示例都可以

For example if we would like to move element up on 50px both examples above kind of work

示例1

position: relative;
top: -50px;

示例2

transform: translateY(-50px);

您能否解释一下未来行为的可能差异或存在的细微差别?

Can you please explain possible difference in future behavior or maybe some nuances that exist?

推荐答案

示例1

• 在正常情况下可以使用

• can be used in normal case

几乎所有浏览器都支持-无需为其他浏览器重写

supported by almost every browser - don't need to rewrite for other browsers

示例2

• 可用于动画-使用变换，您可以在三个维度上旋转对象
• 有限的浏览器支持(需要CSS3，因此不需要早期版本的IE或Opera Mini)
• 结合使用延迟，您可以为旋转设置动画

这篇关于位置:相对vs转换:翻译的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！