transformプロパティのmatrix3d()関数は、要素に3D変形を適用する際に使用します。
マトリクスとは行列のことで、matrix3d()関数では行列を使用して3D変形を指定します。
変形の内容は16個の数値で指定します。
基準となる値は、matrix(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 )で、この場合には座標は変化しません。
指定すべき数値が16個もあると複雑に感じますが、以下のように4×4に分けて考えると理解しやすいでしょう。
16個の数値とはつまり、4×4の行列を指定していることに他なりません。
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
)
■4×4の行列で座標変換する理由
まず、何も変形しない場合の座標変換を確認してみましょう。
次に、拡大縮小を行う場合の座標変換を確認してみましょう。
ここまでの計算では、4×4の行列ではなくても3×3の行列でも十分でした。
しかし、3Dで平行移動を行う場合の座標変換では、4×4の行列である必要があります。
■どの数値がどの変形を担っているのか
変形は、複雑な場合にも回転・拡大縮小・平行移動の基本的な変形に分解することができます。
4×4の行列は一見複雑ですが、どの数値がどの変形を担っているのかを覚えてしまえば理解しやすいかもしれません。
X軸回転のみで、拡大縮小・平行移動をしない場合
matrix3d(
1, 0, 0, 0,
0, Math.cos(角度値), Math.sin(-角度値), 0,
0, Math.sin(角度値), Math.cos(角度値), 0,
0, 0, 0, 1
)
Y軸回転のみで、拡大縮小・平行移動をしない場合
matrix3d(
Math.cos(角度値), 0, Math.sin(角度値), 0,
0, 1, 0, 0,
Math.sin(-角度値), 0, Math.cos(角度値), 0,
0, 0, 0, 1
)
Z軸回転のみで、拡大縮小・平行移動をしない場合
matrix3d(
Math.cos(角度値), Math.sin(-角度値), 0, 0,
Math.sin(角度値), Math.cos(角度値), 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
)
拡大縮小のみで、回転・平行移動をしない場合
matrix3d(
sx, 0, 0, 0,
0, sy, 0, 0,
0, 0, sz, 0,
0, 0, 0, 1
)
平行移動のみで、回転・拡大縮小をしない場合
matrix3d(
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
tx, ty, tz, 1
)
尚、2Dマトリクス変形を適用する場合には、
transformプロパティのmatrix()関数で指定することもできます。
matrix(a, b, c, d, e, f) は、
matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, e, f, 0, 1)と同じです。
■値
- matrix3d(数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値)
-
16個の数値（4×4の行列）で3D変形を指定します。
matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)を指定すると、座標は変化しません。
■初期値・適用対象・値の継承
- 初期値
- none
- 適用対象
- ブロックレベル要素、インライン要素
- 値の継承
- しない
■使用例
CSSソースは外部ファイル（sample.css）に記述
p.sample {background-color:limegreen;}
p.sample img {transform: matrix3d(2, 0.2, 0, 0, 0, 0.5, 0, 0, 0, 0, 4, 0, 100, 50, 25, 1);}
HTMLソース
<html>
<head>
<link rel=”stylesheet” href=”sample.css”
type=”text/css”>
</head>
<body>
<p class=”sample”>
matrix3d(<br>
2, 0.2, 0, 0, <br>
0, 0.5, 0, 0, <br>
0, 0, 4, 0, <br>
100, 50, 25, 1<br>
)<br>
<img src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/kaeru.gif”>
</p>
</body>
</html>
ブラウザ上の表示
matrix3d(
2, 0.2, 0, 0,
0, 0.5, 0, 0,
0, 0, 4, 0,
100, 50, 25, 1
)
■ベンダープレフィックスを付けた場合の使用例
CSSソースは外部ファイル（sample.css）に記述
p.prefix_sample {background-color:limegreen;}
p.prefix_sample img {
-moz-transform: matrix3d(2, 0.2, 0, 0, 0, 0.5, 0, 0, 0, 0, 4, 0, 100, 50, 25, 1);
-webkit-transform: matrix3d(2, 0.2, 0, 0, 0, 0.5, 0, 0, 0, 0, 4, 0, 100, 50, 25, 1);
-o-transform: matrix3d(2, 0.2, 0, 0, 0, 0.5, 0, 0, 0, 0, 4, 0, 100, 50, 25, 1);
-ms-transform: matrix3d(2, 0.2, 0, 0, 0, 0.5, 0, 0, 0, 0, 4, 0, 100, 50, 25, 1);
}
HTMLソース
<html>
<head>
<link rel=”stylesheet” href=”sample.css” type=”text/css”>
</head>
<body>
<p class=”prefix_sample”>
matrix3d(<br>
2, 0.2, 0, 0, <br>
0, 0.5, 0, 0, <br>
0, 0, 4, 0, <br>
100, 50, 25, 1<br>
)<br>
<img src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/kaeru.gif”>
</p>
</body>
</html>
ブラウザ上の表示
matrix3d(
2, 0.2, 0, 0,
0, 0.5, 0, 0,
0, 0, 4, 0,
100, 50, 25, 1
)
