filter:progid:DXImageTransform.Microsoft.Matrix()－スタイルシートリファレンス

トップページ > スタイルシートリファレンス > filter > Matrix()

★スタイルシートリファレンス

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

filterプロパティのMatrix()は、二次元面を傾けたような表示にする際に使用します。

■値

M11=横の長さ: 長さの倍率を数値で指定（初期値は1.0）
M22=縦の長さ: 長さの倍率を数値で指定（初期値は1.0）
M12=横の変形: 横の変形を数値で指定、数値の倍率分だけ下辺が右へ移動して変形する（初期値は0.0）
M21=縦の変形: 縦の変形を数値で指定、数値の倍率分だけ右辺が下へ移動して変形する（初期値は0.0）
SizingMethod=表示方法: 変形ではみ出した部分についてclip to original(元のサイズで切り抜き表示)、または、auto expand(範囲を広げて表示)で指定（初期値はclip to original）

■使用例

スタイルシート部分は外部ファイル（sample.css）に記述。

p.sample img {
filter:progid:DXImageTransform.Microsoft.Matrix(M11=1,M22=1,M12=0.1,M21=0.5,sizingMethod="auto expand");
}

HTMLソース

<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>

filterプロパティを適用していない画像 
<img src="images/kaeru.gif">


フィルタ効果Matrix() 
<img src="images/kaeru.gif">

</body>
</html>

↓↓↓

ブラウザ上の表示

filterプロパティを適用していない画像

フィルタ効果Matrix()

■関連項目

BasicImage() …… 透過・回転・反転・グレースケールなどを指定する
fliph() …… 左右反転する
flipv() …… 上下反転する
invert() …… 色（色相・明度・彩度）を反転する
xray() …… X線効果（グレースケールにして反転）を適用する
Alpha() …… 透過表示にする
Chroma() …… 特定の色を透明にする
MaskFilter() …… 指定した色でマスクをかける
Glow() …… 背後から光を当てたような効果を与える
DropShadow() …… ぼかしのない影をつける
Shadow() …… ぼかしのある影をつける
Blur() …… ぼかす
MotionBlur() / blur() …… 方向を指定してぶれさせる
Wave() …… 波状に歪めて表示する
Pixelate() …… モザイク表示にする
Emboss() …… 浮き彫り表示（エンボス）にする
Engrave() …… 彫り込み表示（エングレーブ）にする
Matrix() …… 二次元面を傾けたような表示にする
Gradient() …… 背景と内容の間にグラデーションの面を表示する
zoom …… 拡大・縮小表示する（IE独自の仕様）