This project allows you to simply rotate image by any degree. It uses CSS3 where applicable and falls back to a CANVAS (old firefox, some less known browsers) or VML (IE6) solution where possible. It also gives some simple interface to animate rotation. Keep in mind that primary usage of this plugin is to only rotate "IMG" elements, however experimental version of plugin (ver.3) also rotates other elements (yet does not support so many older browsers).
angle[Number] - default 0
Simply rotate given image by a given angle, no animation is applied. Using jQuery selector all included images are rotated.
Example:
$("#img").rotate(45);Live code example here!
parameters [Object]
This method rotate image with set of options included in parameter (including animation). Parameters are as follow:
Angle value in degrees of an rotation to be executed immediately.
Example:
$("#img").rotate({angle:45});
Live code example here!
Object containing events to bind on to a rotation object. $(this) inside events points to a rotation object - this way you can chain execution of rotations - $(this).rotate(...)
Example (click on icon on the left):
$("#img").rotate({bind:{ click: function(){ $(this).rotate({ angle: 0, animateTo:180 }) } } });
Angle value in degrees of an rotation to be animated to from current angle value (or given angle parameter)
Example: See bind example above to see usage.
An array containing two values - [X, Y]. They define a center of a rotation. Numeric and percentage values are possible ([100,100], or ["50%", "50%"]). Please use values between 0>= x <= imageWidth and 0>= y <= imageHeight (percentage between 0-100%) - this is limitation of already huge canvas area (fallback for old firefox and other non-css3 browsers).
Example (click on icon on the left):
$("#img").rotate({bind:{ click: function(){ $(this).rotate({ angle: 0, center: ["50%", "100%"], animateTo:180 }) } } });
Specifies a duration of a animation when using animateTo action
Example (click on icon on the left):
$("#img").rotate({bind:{ click: function(){ $(this).rotate({ duration:6000, angle: 0, animateTo:100 }) } } });
A function that will be executed on every animation step. As a first argument a current angle is given.
Easing function used to make animation look more natural. It takes five parameters (x,t,b,c,d) to support easing from http://gsgd.co.uk/sandbox/jquery/easing/ (for more details please see documentation at their website). Remember to include easing plugin before using it in jQueryRotate!
Default function:
function (x, t, b, c, d) { return -c * ((t=t/d-1)*t*t*t - 1) + b; }
Where:
No easing (linear easing):
function(x, t, b, c, d) { return b+(t/d)*c ; }
Example (click on icon on the left):
$("#img").rotate({bind:{ click: function(){ $(this).rotate({ angle: 0, animateTo:180, easing: $.easing.easeInOutElastic }) } } });
A function to be called when animation finishes.
Example (click on icon on the left):
$("#img").rotate({bind:{ click: function(){ $(this).rotate({ angle: 0, animateTo:180, callback: function(){ alert(1) } }) } } });
This function simply returns current angle of rotated object.
Example (click on icon on the left):
$("#img").rotate({ angle: 45, bind: { click : function(){ alert($(this).getRotateAngle()); } } });
This function simply stops ongoing rotate animation.
Example (click on icon on the left):
$("#img").rotate({ bind: { click: function(){ $("#img").rotate({ angle: 0, animateTo: 180, duration: 6000 }); setTimeout(function(){ $("#img").stopRotate(); }, 1000); } } });
Live code example here!
Simply rotate an image.
$("#img").rotate(45);
or
$("#img").rotate({angle: 45});
Live code example here!
This is simple example that rotates image when user mouseover/mouseout object.
$("#img").rotate({ bind: { mouseover : function() { $(this).rotate({animateTo:180}) }, mouseout : function() { $(this).rotate({animateTo:0}) } } });
Live code example here!
Rotate image endlessly
var angle = 0; setInterval(function(){ angle+=3; $("#img").rotate(angle); },50);
Live code example here!
Rotate image endlessly using recursive function
var rotation = function (){ $("#img").rotate({ angle:0, animateTo:360, callback: rotation }); } rotation();
Live code example here!
Rotate image endlessly using recursive function and custom easing (similar to example with simple endless rotation)
var rotation = function (){ $("#img").rotate({ angle:0, animateTo:360, callback: rotation, easing: function (x,t,b,c,d){ // t: current time, b: begInnIng value, c: change In value, d: duration return c*(t/d)+b; } }); } rotation();
Live code example here!
Animation rotate using easing from http://gsgd.co.uk/sandbox/jquery/easing/ (remember to also include script contains easing)
$("#img").rotate({ bind: { click: function(){ $(this).rotate({ angle:0,animateTo:180,easing: $.easing.easeInOutExpo }) } } });
Live code example here!
Animation shows how to use variables in JavaScript...
var value = 0 $("#img").rotate({ bind: { click: function(){ value +=90; $(this).rotate({ animateTo:value}) } } });
Live code example here!
jQueryRotate v.2.3 - Minified - 7.6 kB
experimental jQueryRotate 3.1 - 8.3 kB
Who uses plugin (Other examples)
This plugin was mainly created to rotate images (img) elements ONLY. However it uses CSS attributes in modern browsers that will also work for div elements. That's why it works in other browsers but not IE. If you really need to rotate div you can take a look at experimental version of jQueryRotate 3. You can find it download section.
This is a nasty outcome of a replacing a IMG element with VML:Image on the fly. If this issue is a problem for you, you can try call $(element).rotate(0) as soon as possible. Triggering any .rotate method will do the conversion, so you can prepare image object for later use. Thanks to alisonjo2786 there we got some example cases:
Where you can see problem: http://jsfiddle.net/CeLNw/23/
A solution with some more nice features: http://jsfiddle.net/CeLNw/26/
This plugin is tested in many environments so before saying it doesn't work please first check that:
$document.ready(function(){ /// Your code here });
$(element).rotate({ bind : { /// here bind your events } });
Rotate within wrapper (idea sent by Dan Helyar)
When you're forced to rotate within wrapper and found out that its quite tricky problem, you can take look at Dan Helyar findings (only example code left): http://jsfiddle.net/xcnas330/