What is transformation?What is transformation?

We can add movement to our web pages. Transformations modify an element's shape and position while leaving the rest of the page unaffected. As a result, we will be able to create the following effects:

We can add scaling to the elements:

scale example

We can add rotation to the elements:

rotation example

We can add translation to the elements:

rotation example

We can add skewing to the elements:

skew example


We get all these effects with the help of one property -transform using different values. Also, it's important to mention that animation and @keyframe is added only to show the difference between the initial and result element state. It doesn't mean that transform is used only with some animations. We will consider all the effects in the further chapters in detail.

Everything was clear?

Section 5. Chapter 1