User Rating 0.0 ★★★★★

Total Usage 0 times

Category CSS Tools

mat4 Array (16 float values) Paste comma, space, or newline separated values. Brackets are ignored.

Presets:

Is this tool helpful?

Your feedback helps us improve.

★ ★ ★ ★ ★

About

Moving DOM elements via position: absolute with top/left triggers browser repaints on every frame. The GPU never touches it. Applying transforms through matrix3d() offloads the entire computation to the compositor thread, eliminating layout thrashing and achieving 60 fps animations on constrained hardware. The gl-matrix library stores mat4 as a column-major 16-element Float32Array. CSS matrix3d() accepts the same 16 values in identical column-major order. The mapping is a direct pass-through, but manual transcription of 16 floating-point values invites off-by-one index errors that produce silent visual corruption rather than exceptions.

This tool parses raw mat4 output, validates all 16 components as finite IEEE 754 floats, and emits a copy-ready matrix3d() string. It also decomposes the matrix into translation (t_x, t_y, t_z), scale factors, and renders the 4×4 grid so you can visually verify the structure before applying it. Note: decomposition assumes an affine transformation matrix. Non-affine projective matrices will report scale values that include shear components.

Formulas

The gl-matrix mat4 stores a 4×4 matrix in column-major layout as a flat array of 16 floats. The CSS matrix3d() function accepts exactly 16 comma-separated values in the same column-major order:

matrix3d(m[0], m[1], m[2], m[3], m[4], m[5], m[6], m[7], m[8], m[9], m[10], m[11], m[12], m[13], m[14], m[15])

The 4×4 matrix in conventional mathematical notation maps to the flat array as:

m[0]m[4]m[8]m[12]m[1]m[5]m[9]m[13]m[2]m[6]m[10]m[14]m[3]m[7]m[11]m[15]

Translation is extracted from indices 12, 13, 14:

t_x = m[12], t_y = m[13], t_z = m[14]

Scale factors are derived from the magnitudes of the first three column vectors:

s_x = √m[0]² + m[1]² + m[2]²

s_y = √m[4]² + m[5]² + m[6]²

s_z = √m[8]² + m[9]² + m[10]²

Where m[i] denotes the value at flat array index i in column-major order.

Reference Data

Index	Column	Row	Role	CSS matrix3d() Position	Common Use
0	0	0	m₀₀	1st arg	Scale X / Rotate
1	0	1	m₀₁	2nd arg	Rotate / Shear
2	0	2	m₀₂	3rd arg	Rotate (3D)
3	0	3	m₀₃	4th arg	Perspective X
4	1	0	m₁₀	5th arg	Rotate / Shear
5	1	1	m₁₁	6th arg	Scale Y / Rotate
6	1	2	m₁₂	7th arg	Rotate (3D)
7	1	3	m₁₃	8th arg	Perspective Y
8	2	0	m₂₀	9th arg	Rotate (3D)
9	2	1	m₂₁	10th arg	Rotate (3D)
10	2	2	m₂₂	11th arg	Scale Z / Rotate
11	2	3	m₂₃	12th arg	Perspective Z
12	3	0	m₃₀	13th arg	Translate X
13	3	1	m₃₁	14th arg	Translate Y
14	3	2	m₃₂	15th arg	Translate Z
15	3	3	m₃₃	16th arg	Homogeneous W (usually 1)

Frequently Asked Questions

Column-major order matches OpenGL and WebGL conventions. The GPU expects matrix data in this layout. gl-matrix follows this standard so that Float32Arrays can be uploaded directly to shader uniforms via gl.uniformMatrix4fv() without transposition. CSS matrix3d() adopted the same convention, which is why the index mapping is a direct pass-through.

This tool validates all 16 values as finite numbers using Number.isFinite(). If any value is NaN or Infinity, conversion is rejected with a specific error indicating which index is invalid. In practice, NaN propagation in gl-matrix usually indicates an uninitialized vector or a division by zero in a normalize() call on a zero-length vector.

No. The CSS Transforms Module Level 1 specification defines matrix3d() with exactly 16 comma-separated values in column-major order. All modern browsers (Chrome, Firefox, Safari, Edge) implement the same argument order. The specification has been stable since 2013.

Yes. Parse the 16 comma-separated floats from the matrix3d() string and assign them directly to a new Float32Array(16). Since both use column-major order, no reordering is needed. This tool focuses on the mat4-to-CSS direction because that is the common workflow when driving DOM animations from WebGL math.

Scale decomposition computes the Euclidean norm of each column vector. For a pure rotation matrix, all column norms equal 1. If you apply shear (skew) transformations, the column vectors are no longer orthogonal, and the reported scale values will include the shear component. Accurate decomposition of sheared matrices requires QR decomposition or polar decomposition, which is beyond the scope of this quick converter.

Both trigger GPU compositing. translate3d() is syntactic sugar that the browser internally converts to a 4×4 matrix. The rendering performance is identical. However, matrix3d() gives you access to the full affine transform space (rotation, scale, shear, perspective) in a single property, which avoids the overhead of concatenating multiple CSS transform functions.