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;

This is the reason behind the different reactions. The first element, on its default, will position its pivot point at the centre of the element while the second element positions its pivot on its bottom right corner, as it was told to do so. But now we face a new bug… When we hover over the second element, it usually loses focus, which means… it loses the transition. One way of fixing this is by simply creating a parent element and when we hover over it, it activates the transition of the second element. Let’s see:

In that example, Darth Vader, known as #daddy, activates the transform property on the element, and due to this, the son never loses focus 🙂

With this in mind, and a little bit of perspective and gradients we can create very useful (sarcasm) stuff, such as… A wiper. (Yes, you may go ahead and hover over it!)

And last but not least, here is the quite lovely compatibility table.

Leave a Reply

Your email address will not be published. Required fields are marked *