Transforms

The transform property

The transform property allows us to visually manipulate elements by scaling, skewing, rotating, or translating them.

For example:

.element {   
  width: 30px;   
  height: 30px;   
  transform: scale(10); 
}

Despite our declarations for height and width, the transform property scales our element to be ten times their original size!

Transforms are especially fun when combined with animations.

Transform functions

We can use the following functions:

• scale(): scales the size of an element.
• skew(): tilts an element to the right or left.
• rotate(): rotates the element clockwise.
• translate(): repositions the element in a horizontal or vertical direction.
• perspective(): sets the depth used in 3D transforms.

...