JQueryRotate

OpenSource Cross-browser jQuery plugin to rotate image by any-angle with an animation support.

All+ 12+ All+ 6+

Project source-code is hosted GitHub is and using MIT license (free comercial use).

Overview

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

Documentation

Currently plugin provides interface of few methods:

rotate(angle)

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!

rotate(parameters)

parameters [Object]

This method rotate image with set of options included in parameter (including animation). Parameters are as follow:

angle [Number] - default 0

Angle value in degrees of an rotation to be executed immediately.

Example:

$("#img").rotate({angle:45});

Live code example here!

bind [Object]

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
      })
    }
  }
});
animateTo [Number] - default 0

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.

center [Array]

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
      })
    }
  }
});
duration [Number] - default 1000

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
      })
    }
  }
});
step [Function] - default null

A function that will be executed on every animation step. As a first argument a current angle is given.

easing [Function] - default (see below)

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:

t
current time,
b
beginning value,
c
change In value,
d
duration,
x
unused

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
      })
    }
  }
});
callback [Function] - default null

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)  }
      })
    }
  }
});

getRotateAngle()

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());
    }
  }
});

stopRotate()

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!

Examples

Below a few examples with links to a jsFiddle version of the code where you can test various examples on your own!

Example 1

Simply rotate an image.

$("#img").rotate(45);

or

$("#img").rotate({angle: 45});

Live code example here!

Example 2

Mouseover icon to see effect.

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!

Example 3

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!

Example 4

Click on icon to see effect.

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!

Example 5

Click on icon to see effect.

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!

Downloads

Please select one of downloads:

jQueryRotate v.2.3 - Minified - 7.6 kB

jQueryRotate v.2.3 - 13.8 kB

experimental jQueryRotate 3.1 - 8.3 kB

Who's using

Who uses plugin (Other examples)

FAQ

1. I try rotate div element and it works everywhere but not in IE.

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.

2. In IE first time image is rotated it blinks for a while.

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/

Also you can take look at http://code.google.com/p/jqueryrotate/wiki/Documentation and check alisonjo2786 comment there.

3. This plugin doesn't work.

This plugin is tested in many environments so before saying it doesn't work please first check that:

$document.ready(function(){
           /// Your code here
           });

4. My event get lost after calling .rotate

Well unfortunately its true. Removing original element and replacing it with VML or Canvas leads to events being lost. Safest way of binding any events to object that you plan to rotate is:
$(element).rotate({
            bind : {
                  /// here bind your events
                     }
                     });

... Extras

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/