【Matrix()】自在に傾けて表示する

filterプロパティのMatrix()では、画像を自由自在に傾けて表示することができます。 例えば二次元面を傾けるように360度x360度、回転、拡大縮小させることなどが可能です。

縦横の長さや変形の仕方はパラメータで指定します。 書式などについて詳しくはfilterを参照して下さい。

書式

  • filter:progid:DXImageTransform.Microsoft.Matrix(★) ……… 自在に傾けて表示する

★:FilterType=拡大縮小の色、M11=横の長さ、他下記参照

FilterType=拡大・縮小の色
拡大縮小する際の色の採り方を指定します。「bilinear」4画素の平均値を採る、「neares」一番近い画素の値を採る。(初期値bilinear)
Dx=x座標
回転・拡大縮小させる際の始点の内容左上からのx座標を数値で指定します。(SizingMethodがauto expandの場合無効、初期値1.0)
Dy=y座標
回転・拡大縮小させる際の始点の内容左上からのy座標を数値で指定します。(SizingMethodがauto expandの場合無効、初期値1.0)
M11=横の長さ
横方向の長さの倍率を数値で指定します。(初期値1.0)
M22=縦の長さ
縦方向の長さの倍率を数値で指定します。(初期値1.0)
M12=横の変形
下辺をどのくらい横にずらす(変形させる)かを高さに対する比率(数値)で指定します。数値の倍率分だけ下辺が右へ移動します。(初期値0.0)
M21=縦の変形
右辺をどのくらい縦にずらす(変形させる)かを幅に対する比率(数値)で指定します。数値の倍率分だけ右辺が下へ移動します。(初期値0.0)
SizingMethod=処理方法
変形ではみだした部分の処理方法(表示方法)を指定します。「clip to original」はみ出した部分を切り取る、「auto expand」変形に合わせて範囲を広げる、のどちらかを指定。(初期値clip to original)
※引用符で括る必要があります
Enabled
フィルタを実行するか指定します。有効にする場合「1」または「true」、無効にする場合は「0」または「false」を指定。

使用した時の例

.sample1 img {
  filter:progid:DXImageTransform.Microsoft.Matrix(M11=1,M22=1,M12=0.5,M21=0.7,sizingMethod="auto expand");
}
<p>フィルタを適用していない画像<br />
  <img src="image.jpg" alt="" width="130" height="87">
</p>
<p class="sample1">sample1を適用した画像。Matrix(M11=1,M22=1,M12=0.5,M21=0.7,sizingMethod="auto expand")<br />
  <img src="image.jpg" alt="" width="130" height="87">
</p>

ブラウザ上の表示例

フィルタを適用していない画像

sample1を適用した画像。Matrix(M11=1,M22=1,M12=0.5,M21=0.7,sizingMethod=”auto expand”)

対応ブラウザなどのデータ

プロパティ 独自拡張
対応ブラウザ Internet Explorer5.5~
※IE10以降は未対応

関連情報