Pivot/Anchor point in CSS

Pivot point

Pivot or Anchor point. Default in Adobe Illustrator.

Everytime we use CSS we create elements, these elements always have a hidden middle point. This is known as anchor point or pivot. It is a reference on how the element will rotate, scale and move around the screen. In most cases the anchor point is located either at the top left of the element or at its centre.
Along with CSS transform property a way of modifying the anchor point appeared. It is called “transform-origin”. This can be seen, for example, in a rotation:

Both examples activate the same transform properties on hover:

rotate(40deg) and scale(0.6)

but the difference is set when we apply the following to the second element:

transform-origin: 300px center;

Continue reading