【CSS Modules】translate3d()関数の使い方
translate3d()関数の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
translate3d()関数は、CSSのtransformプロパティと組み合わせて使用され、HTML要素を3次元空間内で指定された距離だけ平行移動させる関数です。この関数は、要素をX軸、Y軸、Z軸の3方向に対して同時に移動させる能力を持っています。
具体的には、3つの引数を取ります。最初の引数 tx は、要素を水平方向（X軸）にどれだけ移動させるかを指定します。正の値は要素を右へ、負の値は左へ移動させます。2番目の引数 ty は、要素を垂直方向（Y軸）にどれだけ移動させるかを指定します。正の値は要素を下へ、負の値は上へ移動させます。最後の引数 tz は、要素を奥行き方向（Z軸）にどれだけ移動させるかを指定します。正の値は要素を手前へ、負の値は奥へ移動させます。
これらの移動量は、px（ピクセル）、em、remなどの長さの単位、またはパーセンテージ（%）で指定できます。0を指定すると、その軸方向には移動しません。translate3d()によって要素が移動しても、その要素が元々占めていたレイアウト上の空間はそのまま維持されます。そのため、他の要素の配置に影響を与えることなく、視覚的な位置のみを変更することができます。
この関数は、Webページに奥行きのあるアニメーションやトランジション効果を加える際に非常に有用です。例えば、要素が画面の奥から手前に飛び出してくるような動きや、カードがめくれるような3D効果を実装する際に利用されます。
構文(syntax)
1.element { 2 transform: translate3d(<length-percentage>, <length-percentage>, <length>); 3}
引数(parameters)
tx: <length-percentage>, ty: <length-percentage>, tz: <length-percentage>
- tx: <length-percentage>: X軸方向の移動距離を指定します。ピクセル値または親要素に対するパーセンテージで指定できます。
- ty: <length-percentage>: Y軸方向の移動距離を指定します。ピクセル値または親要素に対するパーセンテージで指定できます。
- tz: <length-percentage>: Z軸方向の移動距離を指定します。ピクセル値または親要素に対するパーセンテージで指定できます。
戻り値(return)
戻り値なし
戻り値はありません