2016/01/06

[css3]transform:translate

今更感いっぱいの気持ちでtransformプロパティtranslateメソッドの使い方を確認。

<img src="./img.png" class="_img" style="transform:translate(50px,50px);">
これは、単純に、X軸方向に50px、Y軸方向に50px動かす処理なんだけど、これ、別にCSS3を使わなくても、marginやpaddingを使って同じことができる気がするんだが、あえてこういったメソッドを用意したのは何故なのだろうか?

marginやpaddingを意識せずに移動させることができるのが魅力なのだろうか?
<img src="./img.png" class="_img" style="transform:translateX(50px);">
だと、X軸方向だけに動いたり
<img src="./img.png" class="_img" style="transform:translateY(50px);">
Y軸方向だけに動いたりすることもできるので、便利だったりする。

0 コメント:

コメントを投稿