トップページ  > CSS3  > transform  > transform:matrix3d()

★CSS3リファレンス

transform:matrix3d() …… 行列を使用して要素に3D変形を適用する
Google Chrome1(-webkit-)Google Chrome2(-webkit-)Google Chrome3(-webkit-)Google Chrome4(-webkit-)Google Chrome5(-webkit-)Google Chrome6(-webkit-) Safari4(-webkit-)Safari5(-webkit-)

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個の数値とはつまり、4x4の行列を指定していることに他なりません。

matrix3d(
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
)

■4x4の行列で座標変換する理由

まず、何も変形しない場合の座標変換を確認してみましょう。

行列式を図で説明:何も変形しない場合

次に、拡大縮小を行う場合の座標変換を確認してみましょう。

行列式を図で説明:拡大縮小する場合

ここまでの計算では、4x4の行列ではなくても3x3の行列でも十分でした。 しかし、3Dで平行移動を行う場合の座標変換では、4x4の行列である必要があります。

行列式を図で説明:平行移動する場合

■どの数値がどの変形を担っているのか

変形は、複雑な場合にも回転・拡大縮小・平行移動の基本的な変形に分解することができます。 4x4の行列は一見複雑ですが、どの数値がどの変形を担っているのかを覚えてしまえば理解しやすいかもしれません。

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個の数値(4x4の行列)で3D変形を指定します。
matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)を指定すると、座標は変化しません。

■適用対象・値の継承・初期値

初期値
none
適用対象
ブロックレベル要素、インライン要素
値の継承
しない

■使用例

スタイルシート部分は外部ファイル(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="../images/kaeru.gif">
</p>

</body>
</html>
↓↓↓

ブラウザ上の表示

matrix3d(
2, 0.2, 0, 0,
0, 0.5, 0, 0,
0, 0, 4, 0,
100, 50, 25, 1
)

■ベンダープレフィックスを付けた場合の使用例

スタイルシート部分は外部ファイル(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="../images/kaeru.gif">
</p>

</body>
</html>
↓↓↓

ブラウザ上の表示

matrix3d(
2, 0.2, 0, 0,
0, 0.5, 0, 0,
0, 0, 4, 0,
100, 50, 25, 1
)

▲ページ先頭へ
トップページ  > CSS3  > transform  > transform:matrix3d()
PR
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
HTMLクイックリファレンスについて
© HTMQ