位置：相对vs变换：翻译[重复]

Question

这个问题在这里已有答案：

• What's the difference between CSS3 translate method and CSS2 relative positioning? 1回答

例如，如果我们想要将50px上的元素移动到上面的两个例子上面

例1

position: relative;
top: -50px;

例2

transform: translateY(-50px);

你能否解释一下未来行为的可能差异，或者可能存在一些细微差别？

Answer 1

例1

• 可以在正常情况下使用
• 几乎每个浏览器都支持 - 不需要为其他浏览器重写

例2

• 可以用于动画 - 使用变换可以旋转三维对象
• 有限的浏览器支持（需要CSS3所以不是早期版本的IE或Opera Mini）
• 结合使用延迟，您可以设置旋转动画