CSSリファレンス

Tweet

transformプロパティのmatrix3d()は要素の3D自由変形が可能です。

16つの引数をとることができ、それぞれの組み合わせにより要素を任意の形に変形させることができます。

.target{
	transform:matrix3d(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p);
}

単純な指定では以下の引数で変形が可能です。

引数aはX軸方向に、引数fはY軸方向に、引数lはZ軸方向に拡大縮小を行います。デフォルトの1で、1より大きい値を指定することで拡大、1より小さい値を指定することで縮小させることができます。これらはscaleX()、scaleY()、scaleZ()への指定と同じ挙動となります。

引数mはX軸方向に、引数nはY軸方向に、引数oはZ軸方向に移動を行います。これはらはtranslateX()、translateY()、translateZ()への指定と同じ挙動となります。

その他の値も、算術演算などをおこない指定することで様々な変形が可能になります。

matrix3d()が利用できるtransformプロパティは一部のブラウザでは「-webkit-」や「-ms-」といったベンダープレフィックスを利用して実装されているので、ベンダープレフィックスを付けた記述も追加することでより多くのブラウザをサポートできるでしょう。

.target{
	-webkit-transform:matrix3d(1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1);
	-ms-transform:matrix3d(1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1);
	transform:matrix3d(1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1);
}

対応ブラウザ

◯は実装済み、△はベンダープレフィックス付の実装、☓は未実装です。
Google ChoromeとFirefoxは執筆時点での最新バージョンでの実装状況です。

参考URL

15. The Transform Functions - matrix3d - W3C

登録日 : 2013年10月26日 最終更新日 : 2013年10月26日

同じカテゴリー(Transform)のエントリー

• backface-visibility
• perspective-origin
• perspective
• transform-style
• transform-origin
• matrix3d()
• matrix()
• perspective()
• skewY()
• skewX()
• skew()
• rotate3d()
• rotateZ()
• rotateY()
• rotateX()
• rotate()
• scale3d()
• scaleZ()
• scaleY()
• scaleX()
• scale()
• translateZ()
• translate3d()
• translateY()
• translateX()
• translate()
• transform