2011-08-18 134 views
16

有些人可以向我解释在转换位置leftright属性或-transform: translateX(n)时的差异,因为两者似乎都达到了同样的效果,可以单独应用。我了解硬件加速的可能性,但这取决于实施。CSS转换与位置

// psuedo code; 

#box { 
    -transition-property: all; 
    -transition-duration: 1s; 
} 

// javascript 

box.style.transform = "translateX(200px)"; 
vs 
box.style.left = "200px"; 

一个优于另一个的优势是什么? 谢谢,

p

回答

5
top

left CSS属性上定位relativeabsolutefixed元件才起作用。此外,topleft属性依赖父级的位置(相对它,绝对或静态)。翻译不受该设置的影响。


翻译转换是 “相同的” 施加topleft当元件具有position: relative。在任何其他情况下,它们不是相同的操作。

+0

这怎么比使用保证金 – GBa

+0

另外值得注意的是,表现一个过渡转换价值远远比使用位置或保证金价值时更顺畅有什么不同。 – Dave

+0

性能取决于浏览器的实现。我更关注规范中包含的内容的哲学原因。 – paulb

11

位置取决于position的设置,transform的作用来自元素本身。所以你可能看到transformposition:relative;相同。

但是,你仍然可以使用transform绝对定位的元素上(将它定位相对而无需额外的元素或诉诸利润率),以及transform是CSS3,所以如果你可以用position相反,你应该。

+0

我不太确定我明白你的意思。让我澄清我的立场。上面的例子提供了两种不同的方式来做同样的事情,这并不重要。这肯定是CSS规范应该避免的。 – paulb