0

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.
enter image description here

Dariush Jafari
  • 5,223
  • 7
  • 42
  • 71
  • 1
    [*Exact duplicate of his previous question, asked less than an hour ago*](http://stackoverflow.com/questions/12152105/dynamic-speedmeter-javascript-or-jquery-plugin). Voting to close. – Ohgodwhy Aug 28 '12 at 03:27

3 Answers3

4

You can use transform origin:

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

as mentioned here:

CSS rotation with respect to a reference point

Community
  • 1
  • 1
Lucas Green
  • 3,951
  • 22
  • 27
1

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.

codingrhythm
  • 1,456
  • 14
  • 26
0

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.

cereallarceny
  • 4,913
  • 4
  • 39
  • 74
  • This isn't all that accurate, as the CSS property transform-origin is specifically for this purpose. – joshnh Aug 28 '12 at 04:11