CSS3のscaleZ()メソッドでz軸方向に要素を変換する方法

CSS3 scaleZ()メソッドとは

scaleZ(z)メソッドは、CSS3の3D変換機能の一つで、要素をz軸（奥行き）方向に拡大・縮小するために使用されます。2D変換では表現できない奥行きのあるエフェクトを実現したい場合に活用できます。

scaleZ()の基本構文

scaleZ()メソッドの構文は以下のとおりです。

scaleZ(z)

ここで、zには各点のz座標に適用するスケール係数（倍率）を数値で指定します。例えば「2」を指定すると、z軸方向の距離が2倍になります。

scaleZ()の使用例

実際のコード例を見てみましょう。perspective（遠近効果）と組み合わせることで、z軸方向の変換が視覚的に確認できます。

div {
   width: 60px;
   height: 60px;
   background-color: black;
}
.perspective {
   transform: perspective(200px) translateZ(-150px);
   background-color: yellow;
}
.scaled-translated {
   transform: perspective(200px) scaleZ(2) translateZ(-150px);
   background-color: orange;
}

コードの解説

この例では、3つのスタイルを定義しています。

1. 基本のdiv要素： 幅・高さ60pxの黒い正方形として表示されます。

2. .perspectiveクラス： perspective(200px)で遠近効果を設定し、translateZ(-150px)によって要素をz軸の負の方向（手前から奥へ）に150px移動させています。黄色で表示され、遠ざかるほど小さく見えます。

3. .scaled-translatedクラス： perspective(200px)の後にscaleZ(2)を適用し、さらにtranslateZ(-150px)で移動させています。scaleZ(2)によりz座標が2倍になるため、translateZによる移動量も実質的に2倍（-300px相当）になり、黄色の要素よりもさらに奥に配置されたように見えます。オレンジ色で表示されます。

ポイントまとめ

• scaleZ()単体では見た目の変化がわかりにくいため、perspective()との併用が必須です。
• scaleZ()はtranslateZ()などの他の3D変換と組み合わせることで効果を発揮します。
• スケール係数が大きいほど、z軸方向への移動や奥行きの影響が強調されます。