Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
/* Equivalent transforms: */ /* Human-readable form */ .readable { transform: translateX(50px) translateY(30px) rotate(45deg) scale(1.5); } /* Matrix equivalent (computed by the browser): matrix(a, b, c, d, tx, ty) matrix(scaleX*cos, scaleY*sin, -scaleX*sin, scaleY*cos, tx, ty) */ .matrix { /* rotate(45deg) scale(1.5) translate(50px, 30px) */ transform: matrix( 1.0607, 1.0607, -1.0607, 1.0607, 50, 30 ); } /* Reading transform via JS DOMMatrix */ /* const el = document.querySelector(".box"); const m = new DOMMatrix( getComputedStyle(el).transform ); console.log(m.m41, m.m42); // tx, ty values */ /* Identity matrix — no transformation */ .identity { transform: matrix(1, 0, 0, 1, 0, 0); }
Result
Open