アップデート 29 7月, 2024

★CSS3リファレンス

山田太郎

テック・リード

私たちはカジノサイトを独自にレビューしています。当社のリンクを通じてサインアップすると、追加料金なしで当社に手数料が発生する場合があります。

transform:matrix3d() …… 行列を使用して要素に3D変形を適用する
Google Chrome1（-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個の数値とはつまり、4×4の行列を指定していることに他なりません。

matrix3d(
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ソース

matrix3d( 
2, 0.2, 0, 0, 
0, 0.5, 0, 0, 
0, 0, 4, 0, 
100, 50, 25, 1 
) 
<img src=”https://www.htmq.com/wp-content/uploads/2024/07/kaeru.gif”>

</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ソース

matrix3d( 
2, 0.2, 0, 0, 
0, 0.5, 0, 0, 
0, 0, 4, 0, 
100, 50, 25, 1 
) 
<img src=”https://www.htmq.com/wp-content/uploads/2024/07/kaeru.gif”>

</body>
</html>

↓↓↓

ブラウザ上の表示

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

山田太郎

山田太郎は、ウェブ開発やグラフィックスプログラミングに10年以上の経験を持つテクノロジーの専門家です。特にHTML5 CanvasやJavaScript、インタラクティブメディアに精通しており、動的なユーザーインターフェースや最先端のウェブアプリケーションの開発に携わってきました。複雑な図形描画や画像操作、リアルタイムグラフィックスに関する知識が豊富で、ウェブ技術の限界を追求する開発者たちにとって頼りになる存在です。知識の共有に情熱を持ち、初心者からプロフェッショナルまで幅広く支援するため、技術フォーラムやブログにも積極的に貢献しています。

全ての投稿者山田太郎