How to set the transform origin to a specific point on the element?

Question

In this example I want to rotate the hammer from its bottom so is there a way to know exactly the right coordinates of a specific point on the element or should I randomly t

Answer 1

If you know you want to rotate from a specific point, ie: the bottom left. You can apply the transform origin using the following keywords;

.hammer-icon {
    // x-offset y-offset 
    transform-origin: left bottom;
}

Further reference: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin