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

To make the transform-origin point relative to the element, you need to use transform-box: fill-box;.

Chrome doesn't support that property yet (CSS transform-box - Chrome Platform Status), but luckily (yet wrongfully) Chrome sets the transform-origin relative to the element if you use percentages instead of pixels (https://css-tricks.com/transforms-on-svg-elements/).

So, to make something that works on most *) modern browsers, use transform-box: fill-box; and transform-origin: xx% yy%;

.hammer-icon {
    transform-origin: 15% 80%;
    transform-box: fill-box;
    ...
}

https://jsfiddle.net/L1790vzo/8

*) IE/Edge doesn't support CSS transforms on SVG elements at all.
*) Proper support in Chrome v64 and Opera v51

Answer 2

transform-origin:[x][y]

replace x and y with percentage values like 50% for mid, 0% for start and 100% for ending positions respectively. I’ve made a pen for helping you to understand this once and for all.

I wrote a complete article here: https://medium.com/@RajaRaghav/understanding-css-transform-origin-property-2ef5f8c50777 with illustrative examples

Answer 3

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