I'm having a bit of an issue trying to rotate an image on a particular point.

I've been using / as an example; which works perfectly when wanting to rotate an image from its center point.

However, using the example above, i wanted to rotate the image around the letter G, how could this be achieved?

Current code:

function rotateGearStick()
{
var rotation = function (){
       $("#gear-stick").rotate({
          angle:0, 
          animateTo:110, 
       });
    }
    rotation();
}

Where gear-stick is the ID of my image.

I'm attempting to create an rev counter dial.

I'm having a bit of an issue trying to rotate an image on a particular point.

I've been using http://jsfiddle/YKj5D/ as an example; which works perfectly when wanting to rotate an image from its center point.

However, using the example above, i wanted to rotate the image around the letter G, how could this be achieved?

Current code:

function rotateGearStick()
{
var rotation = function (){
       $("#gear-stick").rotate({
          angle:0, 
          animateTo:110, 
       });
    }
    rotation();
}

Where gear-stick is the ID of my image.

I'm attempting to create an rev counter dial.

• javascript
• jquery
• html
• jquery-ui
• rotation

Share Improve this question Follow edited May 3, 2013 at 7:53 Anujith 9,37066 gold badges3535 silver badges4848 bronze badges asked May 3, 2013 at 7:53 Oam PsyOam Psy 8,6633535 gold badges9797 silver badges167167 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

http://jsfiddle/YKj5D/1988/

#image{
    margin:100px;
    padding-left:170px; /* <----- */
}

I find this a lot more cleaner fix.

#image{
    -webkit-transform-origin:0px 0px;
    -moz-transform-origin:0px 0px;
    -ms-transform-origin:0px 0px;
    transform-origin:0px 0px; //px or percent whichever you prefer
}

Just change the origin values to whatever suits your needs and it will rotate about that origin.

Recent version of jQueryRotate handles changing center of rotation cross-browse. Using padding-only solution will not work for a fallbacks to CANVAS/VML. Please check http://jqueryrotate.googlecode.

The http://jqueryrotate.googlecode. (suggested by Wilq32 in above post) documentation says adding the "center" attribute as shown below. It takes a array of length 2 of absolute pixel position or percentage. I.e. center: ["150px", "100px"] OR center: ["60%", "50%"]

var rotation = function (){
  $("#image").rotate({
      angle:0, 
      animateTo:360, 
      center: ["150px", "100px"], 
      callback: rotation
  });
}

rotation();