CSS3の3D変換関数の使い方を徹底解説！matrix3dやtranslate3dの基本

CSS3の3D変換（3D Transform）を活用すると、要素をX軸・Y軸に加えてZ軸（奥行き）方向にも移動させることができます。2D変換では表現できない立体感のある演出が可能になり、モダンなWebデザインにおいて非常に強力な機能です。

CSS3で使える主な3D変換関数

3D変換を呼び出すために使用される主なメソッドは以下の通りです。

番号	値と説明
1	matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 16個の値からなる行列を使用して、要素を変換します。
2	translate3d(x,y,z) X軸・Y軸・Z軸の3つの値を使って、要素を移動します。
3	translateX(x) X軸（横）方向に要素を移動します。
4	translateY(y) Y軸（縦）方向に要素を移動します。
5	translateZ(z) Z軸（奥行き）方向に要素を移動します。

3D変換関数の実装例

それでは、実際のコードを見ていきましょう。以下の例では、rotateX()・rotateY()・translateZ()の3つの関数を使って、正方形の要素を立体的に変形させています。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
    display: inline-block;
    width: 200px;
    height: 200px;
    border: 1px solid #CCC;
    margin-left: 20px;
}
.rotateX {
    width: 100%;
    height: 100%;
    background: rgb(52, 0, 241);
    transform: perspective(600px) rotateX(85deg);
}
.rotateY {
    width: 100%;
    height: 100%;
    background: rgb(55, 0, 255);
    transform: perspective(600px) rotateY(75deg);
}
.translateZ{
    width: 100%;
    height: 100%;
    background: rgb(55, 0, 255);
    transform: perspective(600px) translateZ(-200px);
}
</style>
</head>
<body>
<h1>3D transform function example</h1>
<div class="container">
<div class="rotateX"></div>
</div>
<div class="container">
<div class="rotateY"></div>
</div>
<div class="container">
<div class="translateZ"></div>
</div>
</body>
</html>

コードのポイント

このサンプルコードにおける重要なポイントは、perspective(600px)をtransformプロパティ内で指定している点です。perspective()は視点からの距離（奥行きの深さ）を定義する関数で、この値を指定することで初めて3D空間での遠近感が表現されます。値が小さいほど急激なパースがかかり、大きいほど緩やかな立体感になります。

rotateX(85deg)：X軸を基準に85度回転させるため、要素がほぼ水平に倒れたように表示されます。
rotateY(75deg)：Y軸を基準に75度回転させるため、要素が縦方向に傾いた状態で表示されます。
translateZ(-200px)：Z軸のマイナス方向（奥側）へ200px移動するため、要素が小さく後ろに下がったように見えます。

出力結果

上記のコードを実行すると、次のような出力が得られます。それぞれのコンテナ内で、青色の正方形が異なる3D変換によって立体的に変形していることが確認できます。

CSS3の3D変換関数の使い方を徹底解説！matrix3dやtranslate3dの基本

まとめ

CSS3の3D変換関数を使いこなせば、フラットな2Dデザインにはない奥行きのある表現が手軽に実現できます。matrix3d()による高度な行列変換から、直感的に使いやすいtranslate3d()やrotateX()などの個別関数まで、用途に応じて適切な関数を選択することが大切です。まずはperspective()との組み合わせを意識しながら、さまざまな値を試してみてください。

CSS3でトランジションエフェクトを作成する方法をわかりやすく解説

CSSで放射状グラデーションの形状を設定する方法

CSS3の2D変換関数（transform）の使い方を徹底解説
CSS3の2D変換（2D transforms）は、要素を移動（translate）・回転（rotate）・拡大縮小（scale）・傾斜（skew）させることで、見た目や配置を自由に変更できる強力な機能です。アニメーションやインタラクティブなデザインにも欠かせないテクニックとして広く使われています。主な2D変換関数の一覧以下に、よく使用される代表的な2D変換関数をまとめました。番号関数と説明 1matrix(n,n,n,n,n,n)6つの値を使って行列（マトリックス）による変換を定義します。すべての変換を1つの関数で表現できます。 2translate(x,y)要素をX軸方向とY
CSSの2D変換関数（transform）とは？rotate・translate・scale・skewの使い方
CSSの2D変換関数は、要素に対して回転・移動・拡大縮小・傾斜といった2次元の変換効果を適用するために使用されます。これらの関数を活用することで、JavaScriptなどに頼らずCSSだけで動きのあるデザインやアニメーション表現を手軽に実装できます。主な2D変換関数の一覧 translate() －要素をX軸・Y軸方向に移動させます。 scale() －要素をX軸・Y軸方向に拡大または縮小します。 rotate() －要素を指定した角度だけ回転させます。 skew() －要素をX軸・Y軸方向に傾斜させます。各関数の基本構文 translate(x, y)：指定した距離（px