positionより簡単に要素の位置移動ができるtransform: translate();の使い方
webサイト制作していると避けては通れないのが要素の位置移動。
職業訓練校ではpositionを習ったが、このtransform: translateってやつはググった時に散見していたものでpositionとの使い分けとかがいまいちよくわかっていない。
でも最近は仕事で新規サイトの構築以外にもWebサイトの修正をすることも多いのだが、そのときにpositionのrelativeやabsoluteなど、他の要素との相対関係や絶対関係を気にせずに要素の位置移動ができることはかなり使い勝手のよいプロパティと言えるのではないか。
また、ボタンhover時なんかで要素をちょっと移動させたい時にはもってこいのプロパティなのかもしれない。
transformはrotateで要素を反転させたりするときに使うプロパティのイメージはあったけれど、使ってみると簡単だったので使い方を書き残しておきます。
transform: translate(X, Y);
transform: translate(X軸（右方向)の移動, Y軸（下方向）の移動）;transform: translate();の使い方は簡単。
移動させたい要素にtransform: translate();のプロパティでスタイルをあてるだけ。
X軸は右方向の移動なので、左方向に移動させたい時は「-」で数値を指定する。
transform: translate(-15px);上記のコードは左方向に15px移動
Y軸の上下方向に移動させたい時は下記の２パターン。
transform: translateY(-15px);transform: translate(0, -15px);