Transforms can be used to manipulate elements. You can take any element and add one or many transforms to it, including
translate (moving the element),
scale (make it bigger/smaller),
skew (distort the element) and many more. All these transforms happen without disturbing the rendering flow. What does that mean? If you have an element that is a 100px square and you add
transform: scale(2); to it, it is now scaled up to be a 200px square element, but all other elements around it stay in their positions. If instead you double width and height of your element, that will push other elements away.
Let’s go through these one by one.
translate can be used in two different ways:
.movedownright2 manipulate any element in the same way: move it 10px right and 20px down. Negative values (e.g. -10px) would move it left or up.
.movedownright uses a shorthand syntax for translateX and translateY,
.movedownright2 uses the individual
translateY transforms. Notice how you can add several transforms by just leaving a space between them.
scale can be used to scale elements up or down, where
transform: scale(0); means the element is gone,
transform: scale(0.5); scales it down to 50% of the original size and
transform: scale(2); doubles the size to 200%.
skewY you can skew your elements by given angles on the x- or y-axis. With rotate you can
rotate your elements by a given angle.
Now here is an example of using several transforms at once, but only on
:hover when you move the cursor over an element (notice how we are very happy to use transitions again as well):