備忘録的プログラミングリファレンス

skewX() メソッド

 skewX() メソッドは、引数の値から X 軸方向に傾けた形のエレメントを返す CSS 関数です。

skewX()例
.content {
	transform-origin: initial;
	transform: skewX( 30deg );
}
動作の確認はExampleを参照してください

 X軸、Y軸の傾きを一括して指定するには skew() を使用します。Y軸のみは skewY() を使用します。

構文(Syntax)

CSS

skewX( x-angle )

 引数は、X軸方向の角度(単位: deg )です。 指定された方向にエレメントを傾けた形で表示されます。

Example

 skewX() 関数による傾きの例です。

 傾きの基点の調整には、transform-origin プロパティを使用します。 ここでは、エレメント中心を基点としてX軸方向から30度傾けています。