filter:progid:DXImageTransform.Microsoft.Matrix(必要な値) …… 二次元面を傾けたような表示にする(IE5.5以上)




広告
filterプロパティのMatrix()は、二次元面を傾けたような表示にする際に使用します。
- M11=横の長さ
- 長さの倍率を数値で指定(初期値は1.0)
- M22=縦の長さ
- 長さの倍率を数値で指定(初期値は1.0)
- M12=横の変形
- 横の変形を数値で指定、数値の倍率分だけ下辺が右へ移動して変形する(初期値は0.0)
- M21=縦の変形
- 縦の変形を数値で指定、数値の倍率分だけ右辺が下へ移動して変形する(初期値は0.0)
- SizingMethod=表示方法
- 変形ではみ出した部分についてclip to original(元のサイズで切り抜き表示)、
または、auto expand(範囲を広げて表示)で指定(初期値はclip to original)
p.sample img {
filter:progid:DXImageTransform.Microsoft.Matrix(M11=1,M22=1,M12=0.1,M21=0.5,sizingMethod="auto expand");
}
<html>
<head>
<link rel="stylesheet" href="sample.css"
type="text/css">
</head>
<body>
<p>
filterプロパティを適用していない画像<br>
<img src="images/kaeru.gif">
</p>
<p class="sample">
フィルタ効果Matrix()<br>
<img src="images/kaeru.gif">
</p>
</body>
</html>
↓↓↓
filterプロパティを適用していない画像
フィルタ効果Matrix()
広告