【CSS Modules】scale3d()関数の使い方
scale3d()関数の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
scale3d()関数は、CSSのtransformプロパティで使用され、HTML要素を3D空間で指定した比率に拡大・縮小する機能を提供する関数です。この関数を利用することで、Webページ上の要素に対して、より立体的な変形効果やアニメーションを適用することが可能になります。
具体的に、scale3d()関数は3つの引数、sx、sy、szを取ります。sxは要素のX軸方向（水平方向）の拡大率を、syはY軸方向（垂直方向）の拡大率を、そしてszはZ軸方向（奥行き方向）の拡大率を指定します。それぞれの軸に対して、1という値は元のサイズを意味し、2を指定すれば元のサイズの2倍に、0.5を指定すれば元のサイズの半分に要素の大きさを調整できます。例えば、transform: scale3d(1.5, 0.8, 1);と記述した場合、要素はX軸方向に1.5倍に拡大され、Y軸方向に0.8倍に縮小され、Z軸方向には元のサイズが維持されます。
この関数は、要素を奥行き方向に拡大・縮小することで、立体的に見える視覚効果や、奥行きを感じさせるアニメーションを実現する際に非常に役立ちます。例えば、ボタンがマウスオーバー時に手前に飛び出してくるようなインタラクティブな表現や、要素が奥に引っ込むような視覚効果を実装する際に利用されます。scale3d()は、他の3D変換関数と組み合わせることで、さらに複雑でダイナミックなユーザーインターフェースやユーザーエクスペリエンスを構築するための重要なツールの一つです。
公式リファレンス: scale3d()
構文(syntax)
1.element { 2 transform: scale3d(sx, sy, sz); 3}
引数(parameters)
sx, sy, sz
- sx: X軸方向の拡大縮小率を指定する数値。
- sy: Y軸方向の拡大縮小率を指定する数値。
- sz: Z軸方向の拡大縮小率を指定する数値。
戻り値(return)
戻り値なし
戻り値はありません