Aug.4th,2021
＃
“skewY()”関数
“skewY()”関数は要素をY軸方向にシアー変換するための関数です。
“<transform-function>”値として使用することができ、“transform”プロパティで要素を斜めに変形させることができます。
引数は1個の“<angle>”値で、Y軸方向へ傾斜させる角度を表します。
skewY(〚傾斜角〛)
変形マトリクス
以下は“skewY(b)”を表す変形マトリクスの成分です。
| m11 | m21 | m31 | m41 |
|---|---|---|---|
| m12 | m22 | m32 | m42 |
| m13 | m23 | m33 | m43 |
| m14 | m24 | m34 | m44 |
| 1 | 0 | 0 | 0 |
| tan(b) | 1 | 0 | 0 |
| 0 | 0 | 1 | 0 |
| 0 | 0 | 0 | 1 |
＃
使用例
二次元
.transform-1 { transform: skewY(0);}
.transform-2 { transform: skewY(30deg);}
.transform-3 { transform: skewY(45deg);}
.transform-4 { transform: skewY(60deg);}
.transform-5 { transform: skewY(180deg);}
.transform-6 { transform: skewY(-30deg);}
skewY(0deg)
箱
skewY(30deg)
箱
skewY(45deg)
箱
skewY(60deg)
箱
skewY(180deg)
箱
skewY(-30deg)
箱
三次元
.transform-1 { transform: skewY(0);}
.transform-2 { transform: skewY(30deg);}
.transform-3 { transform: skewY(45deg);}
.transform-4 { transform: skewY(60deg);}
.transform-5 { transform: skewY(180deg);}
.transform-6 { transform: skewY(-30deg);}
skewY(0deg)
前
後
右
左
上
下
skewY(30deg)
前
後
右
左
上
下
skewY(45deg)
前
後
右
左
上
下
skewY(60deg)
前
後
右
左
上
下
skewY(180deg)
前
後
右
左
上
下
skewY(-30deg)
前
後
右
左
上
下
＃
