CSS transforms have gained such popularity that it's rare not to see some sort of transformation in a website nowadays—from button shapes and animations to layouts.
Let's dig in.
The transform CSS property allows us to scale, rotate, skew, and translate elements in 2D and 3D spaces, and it looks like this:
transform: translate(-10px, 10%);
This property supports the following values: scale(), skewX() and skewY(), translate(), rotate(), matrix(), and perspective().
Note that X-axis equals horizontal and Y-axis equals vertical.
Tip
An easy way to remember which axis is which is by saying this: "x is a cross so the x-axis is across". http://tiny.cc/xy-axis
The scale() function scales an element. It's also the shorthand for scaleX() and scaleY() functions. It accepts a numeric value without a unit. The numeric value represents the proportion in which the element will be scaled. For example, 2 means that the element will be scaled to twice its size. Negative values...