How can I rotate a html element around an arbitrary point.
I know there is css rotate trasform property that rotates the element around itself. but I want to rotate it in a way like a clock needle.

How can I rotate a html element around an arbitrary point.
I know there is css rotate trasform property that rotates the element around itself. but I want to rotate it in a way like a clock needle.

• javascript
• jquery
• html
• css
• rotation

• 1 Exact duplicate of his previous question, asked less than an hour ago. Voting to close. – Ohgodwhy Commented Aug 28, 2012 at 3:27

3 Answers 3

You can use transform origin:

https://developer.mozilla/En/CSS/-moz-transform-origin

as mentioned here:

CSS rotation with respect to a reference point

I used the rotate to achieve this effect before. All you need to do is extend the needle png file with some transparency. Say if you have a needle with size 5x100, just make that needle to 5x200, and half of the pic is the needle, another half is transparent. then you can just rotate that image.

You're going to have to use Javascript on this one. As expected, here's a few things I found by Googling which use jQuery in particular.

• Chris Coyier
• Jon Combe
• 7 others...