【CSS Modules】scaleZ()関数の使い方

scaleZ()関数は、CSSのtransformプロパティで使用され、要素をZ軸（奥行き方向）に沿って拡大または縮小する変換を実行する関数です。この関数は、要素の拡大・縮小率を表す単一の単位なし数値（倍率）を引数として受け取ります。

たとえば、transform: scaleZ(2); と指定すると、要素はZ軸方向に2倍の大きさに拡大されます。transform: scaleZ(0.5); の場合は、0.5倍、つまり半分の大きさに縮小されます。値が 1 であれば、元のZ軸方向のサイズが維持され、変化は生じません。

scaleZ()単体では、2D平面上の要素に直接的な視覚的変化を与えることは難しい場合があります。これは、Z軸が奥行きを表し、要素の「厚み」や「遠近感」を操作する性質があるためです。Z軸方向の変化を視覚的に明確にするには、親要素にperspectiveプロパティを設定したり、rotateX()やrotateY()などの他の3D変換関数と組み合わせることが効果的です。これにより、要素が3D空間内で回転する際に、奥行き方向の変化がよりはっきりと認識できるようになります。

この関数は、ウェブページに動的な3D効果やアニメーションを実装する際に、要素に奥行きの変化を与えるための重要なツールとして活用されます。

Copy
1transform: scaleZ(<number>);

scaleFactor: <number>

• scaleFactor: <number>: Z軸方向への拡大・縮小率を指定する数値

戻り値なし

戻り値はありません