KandZ – Tuts

We like to help…!

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

Leave a Reply