What does a negative determinant indicate?

A negative determinant (ad - bc < 0) indicates that the shape has been flipped or mirrored across an axis (a reflection transformation).

Updated: August 2026 • Verified v1.2

SVG 2D Matrix Transformation Visualizer & Math Playground

Q: What do the six values in matrix(a,b,c,d,e,f) mean?

a and d control horizontal and vertical scaling/rotation; b and c control vertical and horizontal skewing/shearing; e and f control X and Y translation in pixels.

Creative & DesignNew

Local Browser Execution: Your input is processed locally in your browser and is not sent to UTL servers.

x' = a*x + c*y + e; y' = b*x + d*y + f; det = a*d - b*c

Was this calculation helpful?

Understanding Your Results

Renders an interactive SVG coordinate plane showing original vs transformed geometries, exposes sliders for all six affine coefficients, computes the matrix determinant, and outputs SVG transform attributes and CSS rules.

Practical Guidance & Next Steps

In 2D graphics, matrix(a, b, c, d, e, f) represents [a c e; b d f; 0 0 1]. When the determinant (ad - bc) is negative, the coordinate space has been reflected or inverted.

What is this?

An interactive mathematical playground for visualizing 2D affine transformation matrices matrix(a, b, c, d, e, f) for SVG and CSS.

How does it work?

1. Adjust matrix parameters a, b, c, d (linear transform) and e, f (translation). 2. Observe the geometry transform in real time against the coordinate grid. 3. Copy the ready-to-use SVG transform attribute or CSS transform rule.

Why use it?

Demystifies 2D matrix transformations for web animation, vector illustration, and game physics.

Technical Scope & Calculation Limitations

2D affine transformation geometry.

Frequently Asked Questions

a and d control horizontal and vertical scaling/rotation; b and c control vertical and horizontal skewing/shearing; e and f control X and Y translation in pixels.

Windows Desktop & Widget Options