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

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.