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 renders as emphasized text, displaying the text oblique?
<strong> <pre> <em>
<p>Web development courses: <em></em></p>
Which CSS property defines the space between the element border and its content?
margin padding position
h3 {
  padding: 2px 0.2em;
Click on the method which returns the first element that matches a specified group of selectors.
getElementsByName() querySelector() querySelectorAll()
// gets first Div with class="cls", and shows its content
var elm = document.querySelector("div.cls");
Indicate the PHP variable that contains data from a form sent with method="post".
if(isset($_POST["field"])) {
  echo $_POST["field"];
Rotate HTML objects, Div, Span, images with jQuery

Last accessed pages

  1. Circle and Oval with CSS (6815)
  2. Add Text in Canvas from Input text field, as it is Typed (8913)
  3. querySelector and querySelectorAll (25381)
  4. PHP Code Snippets (7198)
  5. Validate radio and checkbox buttons (9035)

Popular pages this month

  1. PHP Unzipper - Extract Zip, Rar Archives (507)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (468)
  3. SHA256 Encrypt hash in JavaScript (406)
  4. Read Excel file data in PHP - PhpExcelReader (368)
  5. Convert XML to JSON in JavaScript (347)