CODEWITHSUNDEEP
cssrotation
thecodeparadox
thecodeparadox

Reputation: 87073

CSS rotation with respect to a reference point

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.

Upvotes: 36

Views: 46185

Answers (3)

Nino
Nino

Reputation: 707

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.

Upvotes: 0

kufi
kufi

Reputation: 2458

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).

Upvotes: 74

Philip Callender
Philip Callender

Reputation: 1485

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.

Upvotes: 1

Related Questions