IconVault's CSS Matrix Calculator demystifies the math behind every CSS transform. Add translate, rotate, scale and skew steps to a stack, edit their values, and watch each step's 3x3 matrix, the multiplication chain, and the combined result update live. A geometric preview shows your square morphing around its origin, and one click copies the equivalent single matrix() function or the original transform stack. It is free and runs fully in your browser.

Every 2D transform is just a 3x3 matrix, and stacking transforms multiplies those matrices left to right, which is why order matters so much in CSS. Seeing the numbers makes concepts like why rotate then translate differs from translate then rotate click instantly. The calculator is also genuinely useful: paste a stack from DevTools, simplify it to one matrix(a, b, c, d, e, f), or verify hand-written matrices before shipping them. The math is pure client-side JavaScript, so it works in every browser.