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

skewY() メソッド

 skewY() メソッドは、引数の値から Y 軸に対して傾けた形のエレメントを返す CSS 関数です。回転ではありません。
 Y 軸方向は固定され、指定された座標を中心に時計回りにエレメント全体が傾きます。

skewY() メソッド
.content {
	transform-origin: initial;
	transform: skewY( 30deg );
}

動作の確認はExampleを参照してください

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

構文(Syntax)

CSS

skewY( y-angle )

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

Example

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

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