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

skew() メソッド

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

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

 X軸、Y軸の傾きをそれぞれで指定するには skewX()skewY() を使用します。

構文(Syntax)

CSS

skew( x-angle, y-angle )

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

Example

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

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