Javascript Course

In this tutorial it is presented a jQuery plugin that can be used to rotate HTML objects: Div, Span, <p>, images, and other HTML elements by any angle. The rotation effect can also be animated.
- This jQuery-Rotate plugin works in modern browsers (Safari, Chrome, Opera, IE 9), also in IE 7.
- You can download it from jQueryRotate, or copy the following code and save it into a ".js" file on your server (for example, with the name "jqueryrotate3.js").
- This is the version 3.1, released in 13.03.2012.

(function($){var supportedCSS,styles=document.getElementsByTagName("head")[0].style,toCheck="transformProperty WebkitTransform OTransform msTransform MozTransform".split(" ");for(var a=0;a<toCheck.length;a++)if(styles[toCheck[a]]!==undefined)supportedCSS=toCheck[a];var IE=eval('"v"=="\v"');jQuery.fn.extend({rotate:function(parameters)
{if(this.length===0||typeof parameters=="undefined")return;if(typeof parameters=="number")parameters={angle:parameters};var returned=[];for(var i=0,i0=this.length;i<i0;i++)
{var element=this.get(i);if(!element.Wilq32||!element.Wilq32.PhotoEffect){var paramClone=$.extend(true,{},parameters);var newRotObject=new Wilq32.PhotoEffect(element,paramClone)._rootObj;returned.push($(newRotObject));}
return returned;},getRotateAngle:function(){var ret=[];for(var i=0,i0=this.length;i<i0;i++)
{var element=this.get(i);if(element.Wilq32&&element.Wilq32.PhotoEffect){ret[i]=element.Wilq32.PhotoEffect._angle;}}
return ret;},stopRotate:function(){for(var i=0,i0=this.length;i<i0;i++)
{var element=this.get(i);if(element.Wilq32&&element.Wilq32.PhotoEffect){clearTimeout(element.Wilq32.PhotoEffect._timer);}}}});Wilq32=window.Wilq32||{};Wilq32.PhotoEffect=(function(){if(supportedCSS){return function(img,parameters){img.Wilq32={PhotoEffect:this};this._img=this._rootObj=this._eventObj=img;this._handleRotation(parameters);}}else if(IE){return function(img,parameters){this._img=img;this._rootObj=document.createElement('span');"inline-block";this._rootObj.Wilq32={PhotoEffect:this};img.parentNode.insertBefore(this._rootObj,img);this._Loader(parameters);}}else{return function(img,parameters){this._rootObj=img;}}})();Wilq32.PhotoEffect.prototype={_setupParameters:function(parameters){this._parameters=this._parameters||{};if(typeof this._angle!=="number")this._angle=0;if(typeof parameters.angle==="number")this._angle=parameters.angle;this._parameters.animateTo=(typeof parameters.animateTo==="number")?(parameters.animateTo):(this._angle);this._parameters.step=parameters.step||this._parameters.step||null;this._parameters.easing=parameters.easing||this._parameters.easing||function(x,t,b,c,d){return-c*((t=t/d-1)*t*t*t-1)+b;}
{if(this._parameters.bind){var oldEvents=this._parameters.bind;for(var a in oldEvents)if(oldEvents.hasOwnProperty(a))
this._parameters.bind=events;for(var a in events)if(events.hasOwnProperty(a))
{var width=this._img.width;var height=this._img.height;this._rootObj.appendChild(this._img);;;"absolute";this._rootObj=this._img;this._rootObj.Wilq32={PhotoEffect:this}"progid:DXImageTransform.Microsoft.Matrix(M11=1,M12=1,M21=1,M22=1,sizingMethod='auto expand')";this._eventObj=this._rootObj;this._handleRotation(parameters);},_animateStart:function()
this._animateStartTime=+new Date;this._animateStartAngle=this._angle;this._animate();},_animate:function()
{var actualTime=+new Date;var checkEnd=actualTime-this._animateStartTime>this._parameters.duration;if(checkEnd&&!this._parameters.animatedGif)
{if(this._canvas||this._vimage||this._img){var angle=this._parameters.easing(0,actualTime-this._animateStartTime,this._animateStartAngle,this._parameters.animateTo-this._animateStartAngle,this._parameters.duration);this._rotate((~~(angle*10))/10);}
var self=this;this._timer=setTimeout(function()
{var rad=Math.PI/180;if(IE)
return function(angle)
{this._angle=angle;var _rad=angle*rad;costheta=Math.cos(_rad);sintheta=Math.sin(_rad);var fil=this._rootObj.filters.item("DXImageTransform.Microsoft.Matrix");fil.M11=costheta;fil.M12=-sintheta;fil.M21=sintheta;fil.M22=costheta;"px";"px";}
else if(supportedCSS)
return function(angle){this._angle=angle;[supportedCSS]="rotate("+(angle60)+"deg)";}})()}})(jQuery);

Include this plugin after including main jQuery.
<script src="jquery_library.js"></script>
<script src="jqueryrotate3.js"></script>

To apply rotation effect on an HTML object, use this syntax:
- parameter can be:
      1) A simple number (positive, or negative) that represents the rotation angle (default is 0). Negative value rotates counter clockwise.
      2) An object containing parameters for rotation, that can support various attributes for events and animation effects (see in the examples bellow).

In Chrome browser, the inline HTML elements (SPAN, B, I, U, STRONG) can be rotated with this plugin only if they have CSS position:absolute;, or position:fixed; (excepting <img>).

Examples Rotate HTML objects

• See the code in the following examples, and test them yourself to learn how to use this jQuery Rotate script.
1. Rotate Div by 25 angle degrees, counter clockwise. The DIV is rotated with all its content.
<div id="idex1" style="width:220px; background:#abefcd; padding:3px;">
 <p style="background:#fefefe;">Paragraph in the rotated DIV.</p>
 JavaScript /jQuery Course: <a href="//" title="JavaScript-jQuery Course"></a>.

jQuery(document).ready(function() {


Paragraph in the rotated DIV.

JavaScript /jQuery Course:

2. Simply rotate an image by 30 degrees.
<img src="image.jpg" width="120" height="45" alt="Rotate image" id="idex2" />

jQuery(document).ready(function() {

Rotate image


- The animateTo attribute animates the rotation from current angle to given angle value.
    3. Rotates a SPAN element with 60 degrees each time the user click on it (with animation effect).
Click various time on <span style="background:#08ed09; font-weight:bold; cursor:pointer;" id="idex3">This text</span> to see the effect.

var angl = 60; // rotation angle

jQuery(document).ready(function() {
 $('#idex3').click(function() {
 // inline elements need position absolute (or fixed) to can be rotated with this plugin in Chrome

 angl += 60; // increase the angle with 60 degrees to each rotation

Click various time on This text to see the effect.

bind, duration

bind is an object containing events to bound on a rotation element.
The duration attribute specifies a duration for animation (in milliseconds) when using animateTo action (default 1000).
    4. Rotate a H3 tag (positioned absolute into a Div) that shows and hides a text when mouseover /mouseout.
<div style="position:relative;">I'am here, and you are.<h3 id="idex4" style="position:absolute; top:0; left:0; margin:0; background:#09ed09;"> What hides here ? </h3></div>

jQuery(document).ready(function() {
 jQuery('#idex4').rotate({bind: {
 mouseover: function() { 
 duration: 2500,
 mouseout: function() { 
 duration: 500,

Demo (mouseover text to see effect):
I'am here, and  you are.

What hides here ?

getRotateAngle , stopRotate

The getRotateAngle() function returns current angle of rotated object.
The stopRotate() function stops ongoing rotate animation.

in the example bellow there are used other two functions of this jQuery-rotate plugin (see also the comments in code):
- callback specifies a function to be called when animation finishes.
- The easing function takes five parameters (x,t,b,c,d); x=unused, t=current time, b=beginning value, c=change in value, d=duration.
No easing (linear easing):
easing: function(x, t, b, c, d) { return (t/d)*c ; }

    5. Rotate a DIV endlessly, using recursive function (with callback) and easing (linear easing to make animation look more natural). The rotate animation stops when click on the element, and displays the current angle inside Div.
<div id="idex5" style="width:100px; height:80px; background:#08ed09;">Click to stop.</div>

jQuery(document).ready(function() {
 var rotation = function (){
 angle:0, // reset rotation angle to 0 where to start the rotation
 // rotate 360 degrees (counter clockwise), in 3 secconds
 duration: 3000,
 // auto-call the function after rotation, to rotate again and again
 callback: rotation,
 // add easing to make animation look more natural
 // t: current time, b: begInnIng value, c: change In value, d: duration
 easing: function (x,t,b,c,d){
 return c*(t/d)+b; // linear easing
 // bind "click" to stop the rotation when click, gets and display the current angle
 bind: {
 click: function(){
 jQuery(this).html('<br/> Angle: <b>'+ $(this).getRotateAngle()+ '</b>');

 rotation(); // call the function to start rotation

Demo (click on green rectangle):

Click to stop.

Daily Test with Code Example

Which tag is used to add definition lists into a <dl> element?
<dt> <dd> <li>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
Rotate HTML objects, Div, Span, images with jQuery

Last accessed pages

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (56230)
  2. PHP MySQL - WHERE and LIKE (23080)
  3. PHP OOP - Inheritance, class extends (4349)
  4. PHP-MySQL free course, online tutorials PHP MySQL code (56142)
  5. Basic HTML elements (4278)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (486)
  2. Register and show online users and visitors (339)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (255)
  4. JavaScript Course - Free lessons (251)
  5. querySelector and querySelectorAll (237)