CSS 46 💻 transform matrix and matrix3d

a - transform matrix
transform: matrix() is used to apply a 2D transformation to an element
It uses a transformation matrix
syntax: transform: matrix(a, b, c, d, e, f);
a, d → Scale along X and Y axis respectively
b, c → Skew along X and Y axis respectively.
e, f → Translate along X and Y axis respectively.
transform: matrix(1, 0, 0, 1, 100, 100); → Basic Translation
transform: matrix(0.707, 0.707, -0.707, 0.707, 0, 0); → Basic Rotation
transform: matrix(1, 0.3, -0.3, 1, 0, 0); → Scaling and Skewing

b - transform matrix3d
transform: matrix3d() allows you to apply a 3D transformation to an element
It uses a 4x4 transformation matrix.
transform: matrix3d(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p);
a, b, c, e, f, g, i, j, k, m, n, o → describe the linear transformation
d, h, l, p → describe the translation
example 1→ Basic rotation
example 2→ Scaling and translation
example 3→ Skewing 

---

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!