CSS3 transforms

Now that we know how to declare an animation either by CSS Transitions or by CSS Animations, we will learn how to transform elements so that we will get able to create cool and useful animations.

CSS transforms allow us to transform an element by scaling, skewing, translating, or rotating it in two or three dimensions.

Here, you can imagine how to use a transform with our animations and transitions. The good news is that transform is an animatable property, which means that we can use this feature with keyframes and transitions in order to achieve animation effects. Transforms aren't strictly used for animations, but they are often useful in combination with animations.

This method is useful because it's relative, it's generic, and it can be reused on many occasions. If we want to scale an item to two times its size, we can use it for an element with a width of 100 px or 1000 px. The size doesn't matter, it will just double it. The same applies to moving...