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

rotate3d() ファンクション

 rotate3d() ファンクションは、引数のX軸、Y軸、Z軸の回転に関するベクトルと回転角度から立体的に回転したエレメントを返す CSS 関数です。
 X軸、Y軸、Z軸の方向のベクトルは、1 で右回り,-1 で左回り、0 でなしになります。数値の大きさで回転度合いの配分となります。
 X軸、Y軸、Z軸、それぞれのみを中心に回転させたい場合は、rotateX()rotateY()rotateZ() が使えます。

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

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

  transform プロパティによる回転の中心は transform-origin プロパティによって変更ができます。

構文(Syntax)

CSS

rotate3d( x, y, z, angle )

引数

 x, y, z は基準軸の有無を表し、0 または 1 です。angle は 回転量(単位:deg)です。

Example

 3D(立体)の例で、エレメントを rotate3d() 関数でX軸を中心に60度、Z軸を中心に20度回転させています。

 こちらは、回転の中心点を変更すると複雑になるので transform-origin プロパティを設定していません。