“skew()”関数

“skew()”関数

“skew()”関数は要素を二次元平面上(xy-平面)でシアー変換するための関数です。

引数は2個の“<angle>”値をコンマ“,”で区切って記述します。

skew(〚X軸方向の傾斜角〛,〚Y軸方向の傾斜角〛)


1個目の引数はX軸方向へ傾斜させる角度を表します。

2個目の引数はY軸方向へ傾斜させる角度を表します。2個目の引数は任意で、省略された場合は“0”として扱われます。

変形マトリクス

以下は“skew(a,b)”を表す変形マトリクスの成分です。

m11	m21	m31	m41
m12	m22	m32	m42
m13	m23	m33	m43
m14	m24	m34	m44
1	tan(a)	0	0
tan(b)	1	0	0
0	0	1	0
0	0	0	1

使用例

.transform-1 { transform: skew(0,0);}
.transform-2 { transform: skew(0,30deg);}
.transform-3 { transform: skew(30deg,0);}
.transform-4 { transform: skew(30deg,30deg);}
.transform-5 { transform: skew(0,-30deg);}
.transform-6 { transform: skew(-30deg,0);}
.transform-7 { transform: skew(-30deg,-30deg);}
.transform-8 { transform: skew(30deg,-30deg);}


仕様書

定義されている仕様書

skew()