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