CSS rotation with respect to a reference point

Question

How to rotate an element with respect to a defined point i.e. defined x & y coordinate in CSS (webkit)?

Normally rotation make element's center point as reference.

Answer 1

You could use transform-origin. It defines the point to rotate around from the upper left corner of the element.

transform-origin: 0% 0%

This would rotate around the upper left corner.

For other options look here: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

for the safer side if this link not available then here are a couple of more options

transform-origin: center; // one of the keywords left, center, right, top, and bottom

transform-origin: top left; // same way can use two keywords

transform-origin: 50px 50px; // specific x-offset | y-offset

transform-origin: bottom right 60px; // third part is for 3D transform : z-offset

As far as I know there isn't an option to rotate around a fixed point (although this would be handy).

Answer 2

If you need a specific offset, one way is to edit your image to make it larger, such that the centre lies in the middle of your image. You can then place this within a DIV with "overflow: none" and position it with relative positioning. The div will mask off the area of the image you don't wish to display.

Answer 3

It is now August 2022, older answers do not include the use of px as mentioned in the documentation.

transform-origin accepts keyboards (left, right, top, bottom, or center), percentage (50%, 69%...) or length describing how far from the left edge of the box the origin of the transform is set.

Therefore transform-origin: 360px 540px; is absolutely fine and works as expected.