【CSS Modules】translateZ()関数の使い方
translateZ()関数の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
translateZ()関数は、CSSのtransformプロパティで使用され、HTML要素をZ軸方向に移動させる変換を実行する関数です。この関数は、Webページ上の要素に奥行きを与える3D変換の一つであり、要素をユーザーの視点から手前または奥に動かすことができます。Z軸は、画面の表面に垂直に伸びる奥行き方向を表し、値が正の場合は要素が手前に、負の場合は要素が奥に移動します。
この関数を使用することで、要素に立体感や遠近感を持たせることが可能になります。例えば、ウェブサイトのカードコンポーネントをわずかに浮き上がらせて見せたり、特定のUI要素に奥行きを与えて視覚的な階層を表現したりする際に役立ちます。
translateZ()関数は引数として距離の値を、ピクセル（px）やemなどの単位付きで指定します。例えば、translateZ(100px)と記述すると、要素はZ軸方向に100ピクセル手前に移動します。逆に、translateZ(-50px)と指定すると、要素は50ピクセル奥に移動します。
translateZ()による3D効果を視覚的に明確にするためには、通常、親要素や対象要素の近くにperspectiveプロパティを設定することが重要です。perspectiveプロパティは、要素を見る「視点」の位置を設定し、遠近感を適切に表現するために不可欠です。また、この関数は、translateX()やtranslateY()などの他のtransform関数と組み合わせて使用することで、要素の移動や回転と連動した、より複雑で動的な3Dアニメーションや表現を実現できます。これにより、ウェブコンテンツに深みとインタラクティブ性をもたらすことができます。
構文(syntax)
1.element { 2 transform: translateZ(100px); 3}
引数(parameters)
- <length-percentage>: 要素をZ軸方向に移動させる距離を指定します。単位はピクセル（px）などの絶対値、または親要素に対する割合（%）で指定できます。
戻り値(return)
transform-function
CSSのtranslateZ()関数は、3次元空間における要素のZ軸方向への移動を指定するtransform-functionを返します。この関数は、要素をカメラから遠ざけたり、近づけたりする効果を実現するために使用されます。