★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個の数値とはつまり、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ソース

<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://www.htmq.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://www.htmq.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
)

広告



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

ギャンブルガイド もっと見る

カジノファインダー

どのカジノが自分に最適か分からないですか?

サインアップは必要なく、1 分以内に最適なブックメーカーを簡単に見つけることができます。
カジノを探す
Back
質問
Select one of the following options
{"is_any_tile":true}

どのカジノが自分に最適か分からないですか?

Back
Restart
やったー!
これはあなたの選択に基づいた最高のカジノです...
52 users signed up
もっと表示する