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

matrix3d() ファンクション

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

matrix3d()
.content {
	transform-origin: initial;
	transform: matrix3d( 1, 0, 0, 30deg );
}

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

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

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

構文(Syntax)

CSS

matrix3d( x, y, z, angle )

引数

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

Example

 3D(立体)の例です。

 matrix3d() ファンクションは、引数のX軸、Y軸、Z軸の回転に関するベクトルと回転角度から立体的に回転したエレメントを返します。

 以下の例では、エレメントを matrix3d() 関数でX軸を中心に60度、Z軸を中心に20度回転させています。

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