How to Use Transforms in CSS

1.transformed {
2  transform: translate(-20px, -30px);
3}

translateX(n) and translateY(n) are two of its variants. translateX(n) moves the element along the X-axis, and translateY(n) moves the element along the Y-axis.

Scale

The scale(width, height) alters the size of the element based on its original size. For instance, scale(3,2) will increase the element's size to three times its original width and two times its original height.

1.transformed {
2  transform: scale(3, 2);
3  background-color: rgb(255, 228, 196, 0.5);
4}

To shrink the original element, use decimal numbers.

1.transformed {
2  transform: scale(0.3, 0.2);
3  background-color: rgb(255, 228, 196, 0.5);
4}

Similarly, scaleX(width), and scaleY(height) are two of its variants.

Rotate

The rotate(degree) method, as the name suggests, rotates the original element along its center point, either clockwise (positive values) or counter-clockwise (negative values).

1.transformed {
2  transform: rotate(45deg);
3  background-color: rgb(255, 228, 196, 0.5);
4}

1.transformed {
2  transform: rotate(-45deg);
3  background-color: rgb(255, 228, 196, 0.5);
4}

Skew

The skew(x,y) method skews the element along X-axis and Y-axis.

1.transformed {
2  transform: skew(20deg, 30deg);
3  background-color: rgb(255, 228, 196, 0.5);
4}

And just like the other variants, skewX(n) skews the element along the X-axis, and skewY(n) skews the element along the Y-axis.

Matrix

Lastly, the matrix() method combines all of the functions discussed above, allowing you to define multiple transforms simultaneously. The syntax is as follows:

1matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

Notice how rotate() is missing from this syntax? That is because the rotation degree (θ) can be derived from the following equation:

1θ = atan2(skewY(), scaleX()) * (180 / π)

Where atan2(b, a) is an arctangent function that takes two values and returns the angle whose tangent is the quotient of b and a. (180 / π) then converts radiant to degrees.

That is a lot of math for a web development course, so we suggest you avoid using the matrix() function if possible. You might have to write more code and use more functions to achieve the same result, but it will make the code much easier to understand, and sometimes, that is much more crucial than writing less code.