DevTools Logo

3D Affine Transform Visualizer

3D Affine Transform Visualizer

Compose 4×4 transforms, inspect matrices, and preview a transformed cube in your browser

Transform order

The list is multiplied from top to bottom. Move operations to see order effects.

1. Translate
2. Rotate Y
3. Rotate Z
4. Scale

Combined matrix & wireframe

1.192	-0.310	0.338	1.000
0.479	0.940	0.000	0.000
-0.556	0.145	0.725	0.000
0.000	0.000	0.000	1.000

Determinant: 1.1200

Transformed vertex 1: (-0.22, …)

About

This visualizer composes ordered 4x4 affine matrices — translation, rotation about X/Y/Z, uniform or per-axis scale, and shear — then applies the combined matrix to the corners of a unit cube so you can see exactly what the transform does. It shows the composed matrix, its determinant, and its inverse (via Gauss-Jordan), plus Euler-rotation matrices in the standard Z*Y*X row-major convention. Everything runs locally: matrix multiplication, inversion, and rendering are pure client-side math with no network requests. Use it to reason about transform order (rotating then translating differs from translating then rotating), verify normals or coordinate conversions, or generate matrices to paste into WebGL, Three.js, or shader code.

About this tool

Build 4x4 affine transforms, chain translate/rotate/scale matrices, and preview a rotating cube wireframe. Free 3D matrix calculator — nothing leaves your browser. 3D Affine Transform Visualizer runs in the browser on DevTools. There is no signup, and your input stays on this device unless the tool explicitly performs a live network lookup.

What this tool does not do

  • 3D Affine Transform Visualizer is a free in-browser utility, not a hosted API. It does not keep server-side history and is not a substitute for production verification in your own stack.

How do I use this tool?

  1. How do I use 3D Affine Transform Visualizer?

    Open 3D Affine Transform Visualizer, enter or paste your input, and copy the result. The page works without an account.