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

rotateZ() ファンクション

 rotateZ() ファンクションは引数の回転角度から、Z軸を中心に回転したエレメントを返す CSS 関数です。
 X軸、Y軸、それぞれのみを中心に回転させたい場合は、rotateX()rotateY() が使えます。
 X軸、Y軸、Z軸を組み合わせて回転させたい場合は rotate3d() メソッドを利用します。

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

 rotateZ() ファンクションは、エレメントの変形に関する transform プロパティで transform-functions として利用します。

  transform プロパティの回転は、 transform-origin プロパティによってその中心を決めます。

構文(Syntax)

CSS

rotateZ( angle )

引数

 引数の単位は、角度を示す deg や回転を示す turn です。0 がデフォルト値で、0deg と同じです。

Example

 rotateZ()関数による回転例です。

 回転の中心の調整には、transform-originプロパティを指定します。