このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

skew()”関数注意

記事Aug.4th,2021
要素を二次元平面上でシアー変換するCSSの関数、“skew()”について
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

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);}

仕様書

定義されている仕様書
Level 1 Level 2
勧告候補(CR) 作業草稿(WD)
skew()
非推奨

非推奨
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク