Close
transformプロパティのmatrix()関数は、要素に2D変形を適用する際に使用します。
マトリクスとは行列のことで、matrix()関数では行列を使用して2D変形を指定します。
変形の内容は6個の数値で指定します。
基準となる値は、matrix(1, 0, 0, 1, 0, 0)で、この場合には座標は変化しません。
尚、3Dマトリクス変形を適用する場合には、
transformプロパティのmatrix3d()関数を使用します。
matrix(a, b, c, d, e, f) は、
matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, e, f, 0, 1)と同じです。
※メモ：matrix()関数の6つの数値についてGoogle Chromeで表示を確認したところ、以下のように対応しているようです。
1番目の数値は、水平方向の縮尺（a）
2番目の数値は、垂直方向の傾斜率（b）
3番目の数値は、水平方向の傾斜率（c）
4番目の数値は、垂直方向の縮尺（d）
5番目の数値は、水平方向の移動距離（e）
6番目の数値は、垂直方向の移動距離（f）
p.sample {background-color:limegreen;}
p.sample img {transform: matrix(0.5, 0.2, 0, 0.5, 200, 50);}
<html>
<head>
<link rel=”stylesheet” href=”sample.css”
type=”text/css”>
</head>
<body>
<p class=”sample”>
matrix(0.5, 0.2, 0, 0.5, 200, 50)<br>
<img src=”https://www.htmq.com/wp-content/uploads/2024/07/kaeru.gif”>
</p>
</body>
</html>
matrix(0.5, 0.2, 0, 0.5, 200, 50)
p.prefix_sample {background-color:limegreen;}
p.prefix_sample img {
-moz-transform: matrix(0.5, 0.2, 0, 0.5, 200, 50);
-webkit-transform: matrix(0.5, 0.2, 0, 0.5, 200, 50);
-o-transform: matrix(0.5, 0.2, 0, 0.5, 200, 50);
-ms-transform: matrix(0.5, 0.2, 0, 0.5, 200, 50);
}
<html>
<head>
<link rel=”stylesheet” href=”sample.css” type=”text/css”>
</head>
<body>
<p class=”prefix_sample”>
matrix(0.5, 0.2, 0, 0.5, 200, 50)<br>
<img src=”https://www.htmq.com/wp-content/uploads/2024/07/kaeru.gif”>
</p>
</body>
</html>
matrix(0.5, 0.2, 0, 0.5, 200, 50)
どのカジノが自分に最適か分からないですか?
