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

skewX()”関数CSS3で追加

記事Aug.4th,2021
要素をX軸方向にシアー変換するCSSの関数、“skewX()”について
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

skewX()”関数

skewX()”関数は要素をX軸方向にシアー変換するための関数です。

<transform-function>”値として使用することができ、transform”プロパティで要素を斜めに変形させることができます。

引数は1個の<angle>”値で、X軸方向へ傾斜させる角度を表します。

skewX(〚傾斜角〛)
変形マトリクス

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

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

使用例

二次元

.transform-1 { transform: skewX(0);}
.transform-2 { transform: skewX(30deg);}
.transform-3 { transform: skewX(45deg);}
.transform-4 { transform: skewX(60deg);}
.transform-5 { transform: skewX(180deg);}
.transform-6 { transform: skewX(-30deg);}
skewX(0deg)
skewX(30deg)
skewX(45deg)
skewX(60deg)
skewX(180deg)
skewX(-30deg)

三次元

.transform-1 { transform: skewX(0);}
.transform-2 { transform: skewX(30deg);}
.transform-3 { transform: skewX(45deg);}
.transform-4 { transform: skewX(60deg);}
.transform-5 { transform: skewX(180deg);}
.transform-6 { transform: skewX(-30deg);}
skewX(0deg)
skewX(30deg)
skewX(45deg)
skewX(60deg)
skewX(180deg)
skewX(-30deg)

仕様書

定義されている仕様書
Level 1 Level 2
勧告候補(CR) 作業草稿(WD)
skewX()
定義あり

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