CSS3のtranslate3dでX・Y・Z軸を使って要素を変換する方法

CSS3では、translate3d(x, y, z)メソッドを使用することで、X軸・Y軸・Z軸の3方向から要素を移動（変換）できます。2D変換のtranslate()と異なり、Z軸の値を指定できるため、奥行きのある立体的な動きを表現できます。

translate3d()の基本構文

translate3d(tx, ty, tz)

各引数には以下の意味があります。

• tx：変換ベクトルのX成分（横方向の移動量）を表す<length>値です。
• ty：変換ベクトルのY成分（縦方向の移動量）を表す<length>値です。
• tz：変換ベクトルのZ成分（奥行き方向の移動量）を表す<length>値です。

いずれの値も正の数は右・下・手前方向への移動、負の数はその逆方向への移動を意味します。単位にはpxやemなどが使用できます。

translate3d()の使用例

実際に要素を3D変換させるサンプルコードを見てみましょう。

div {
    width: 50px;
    height: 50px;
    background-color: orange;
}
.trans {
    transform: perspective(300px) translate3d(15px, 0, 0px);
    background-color: black;
}

この例では、まずperspective(300px)で視点からの距離（遠近感）を設定し、その上でtranslate3d(15px, 0, 0px)により要素をX軸方向に15px移動させています。Y軸とZ軸には0が指定されているため、見た目としては横方向への平行移動になります。

perspectiveとの組み合わせのポイント

Z軸の移動を視覚的に確認したい場合は、perspective()関数や親要素へのperspectiveプロパティの指定が重要です。遠近感が設定されていないと、Z軸方向の移動は画面上に反映されません。perspectiveの値が小さいほど遠近効果が強くなり、立体感のある表現が可能になります。