transformプロパティのtranslate関数の使い方と動き方について下記にまとめます。
目次
1.transform translateでできること
2.値
3.値を整数にした際の要素の変化
4.値を％にした際の要素の変化
5.まとめ
6.参考記事
1. transform translateでできること
transformは与えられた要素を回転、拡大縮小、傾斜、移動することできます。
transformで使用する関数のtranslateは、要素を水平方向や垂直方向で再配置（移動）する際に使用します。
style.css
transform: translate(X軸,Y軸);
要素を移動するには上記のX軸、Y軸に数値を入れる必要があります。
translate関数の値については下記のとおりです。
2. 値
translate(X方向の距離, Y方向の距離)
→X方向とY方向の距離で指定します。
translateX(X方向の距離) ・・・ 縦方向
→X方向の距離で移動を指定します。
translateY(Y方向の距離) ・・・ 横方向
→Y方向の距離で移動を指定します。
translateZ(Z方向の距離) ・・・ 近づいたり、遠ざかったりする。
→Z方向の距離で移動を指定します。
※translateZ()関数にはパーセンテージ値を指定することができないので注意。
もし、パーセンテージで値を指定しても0と同じになります。
translate3d(X方向の距離, Y方向の距離, Z方向の距離) ・・・ 3D空間内で配置する。
→X方向とY方向とZ方向の距離で3D移動を指定します。
Y方向とZ方向の距離は省略することができますが、
この場合のY方向とZ方向の距離は0となります。[tx,ty,tz]
以下では数値をpxと％にしたものを記載しています。
3. 値を整数にした際の要素の変化
X軸とY軸に正数を入れると下記のように移動しました。
style.css
box {
translate（ 100px , 100px ）;
}
正数であれば
・右に正数分
・下に正数分
移動することがわかりました。
では、負数を入れるとどうなるでしょうか。
style.css
box {
translate（ -100px , -100px ）;
}
負数であれば
・左に負数分
・上に負数分
正数とは逆に移動することがわかりました。
4. 値を％にした際の要素の変化
％の値で書くとどうなるでしょうか。
正数で記載したものは下記の通りとなりました。
style.css
box {
translate（ 100％ , 100％ ）;
}
ボックス1つ分のサイズが、縦（下）と横（右）に移動したことがわかりました。
なお、負数で示すとこの動きは逆になります。
style.css
box {
translate（ -100％ , -100％ ）;
}
ボックス1つ分のサイズが縦（上）と横（左）に移動しています。
5. まとめ
translateは、pxや％の値によって動き方が異なることがわかりました。
要素やレイアウトにあった適切な数値を入れて要素の位置を移動しましょう。
6. 参考記事
https://developer.mozilla.org/ja/docs/Web/CSS/transform
https://developer.mozilla.org/ja/docs/Web/CSS/transform-function/translate()
https://developer.mozilla.org/ja/docs/Web/CSS/transform-function/translateZ()
http://www.htmq.com/css3/transform_translate.shtml
https://developer.mozilla.org/ja/docs/Web/CSS/transform-function/translate3d()
↧