skewY関数
関数skewYは、要素をY軸に沿って傾斜させ、
平行四辺形に変形します。
プロパティtransformと組み合わせて使用します。
プロパティの値は、任意の角度単位で指定します。
角度は正の値でも負の値でも構いません。正の値は
上向きの傾斜を、負の値は下向きの傾斜を作成します。
傾斜は、プロパティtransform-originで
指定された点を中心に行われます。
構文
cssセレクタ {
transform: skewY(角度);
}
例
この例では、ブロックが30度
上向きに傾斜しています：
html<div id="elem">lorem ipsum</div>css#elem {
transform: skewY(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
Результат:
例
この例では、ブロックが30度
下向きに傾斜しています：
html<div id="elem">lorem ipsum</div>css#elem {
transform: skewY(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
Результат: