★CSS3リファレンス
transform:matrix() …… 行列を使用して要素に2D変形を適用する
広告
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個の数値で2D変形を指定します。
matrix(1, 0, 0, 1, 0, 0)を指定すると、座標は変化しません。
※メモ：matrix()関数の6つの数値についてGoogle Chromeで表示を確認したところ、以下のように対応しているようです。
1番目の数値は、水平方向の縮尺（a）
2番目の数値は、垂直方向の傾斜率（b）
3番目の数値は、水平方向の傾斜率（c）
4番目の数値は、垂直方向の縮尺（d）
5番目の数値は、水平方向の移動距離（e）
6番目の数値は、垂直方向の移動距離（f）
■初期値・適用対象・値の継承
- 初期値
- none
- 適用対象
- ブロックレベル要素、インライン要素
- 値の継承
- しない
■使用例
CSSソースは外部ファイル（sample.css）に記述
p.sample {background-color:limegreen;}p.sample img {transform: matrix(0.5, 0.2, 0, 0.5, 200, 50);}
HTMLソース
<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="../images/kaeru.gif">
</p>
</body>
</html>
↓↓↓
ブラウザ上の表示
matrix(0.5, 0.2, 0, 0.5, 200, 50)
■ベンダープレフィックスを付けた場合の使用例
CSSソースは外部ファイル（sample.css）に記述
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ソース
<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="../images/kaeru.gif">
</p>
</body>
</html>
↓↓↓
ブラウザ上の表示
matrix(0.5, 0.2, 0, 0.5, 200, 50)
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる！【A8.net】
© HTMQ