2011-08-18 4 views
16

ポジションleftまたはrightのプロパティまたは-transform: translateX(n)の遷移の違いについては、両者が同じことを達成しているように見えますが、別々に適用することができます。私はハードウェアアクセラレーションの可能性について理解していますが、それは実装に依存しています。CSSトランスフォームとポジション

// psuedo code; 

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

// javascript 

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

もう1つの利点は何ですか? おかげで、

P

答えて

5

topleft CSSプロパティはrelativeabsoluteまたはfixedを配置要素でのみ動作します。また、topleftのプロパティは親の位置に依存します(相対、絶対または静的)。翻訳はその設定の影響を受けません。


翻訳変換素子は、position: relativeを有する場合topleftを適用する "同一" です。それ以外の場合は、同じ操作ではありません。

+0

方法は、これはパフォーマンスが翻訳した値を移行する際は、位置や余白の値を使用するよりもはるかに滑らかであることは注目に値する。またマージン – GBa

+0

を使用するよりも何が違うのです。 – Dave

+0

パフォーマンスはブラウザの実装に依存します。私は、仕様に含まれるものの哲学的理由にもっと興味があります。 – paulb

11

位置は、が要素自体から機能するものに依存します。だからとなります。transformposition:relative;と同じです。あなたは、あなたがしなければならない代わりにpositionを使用することができますので、もし

ただし、(追加の要素を必要とするか、余白に頼ることなく、比較的、それを配置する)絶対位置指定要素にtransformを使用するだけでなく、transformいるCSS3ことができます。

+0

私はあなたの言うことを理解しているのか分からない。私の立場を明らかにする。上記の例は、同じ位置を設定する2つの異なる方法を提供しています。これは確かにCSSの仕様が避けるべきものです。 – paulb

関連する問題