Rotate HTML objects, Div, Span, images with jQuery

Javascript Course

• Examples Rotate HTML objects

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));}
else{element.Wilq32.PhotoEffect._handleRotation(parameters);}}
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');this._rootObj.style.display="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;}
this._parameters.duration=parameters.duration||this._parameters.duration||1000;this._parameters.callback=parameters.callback||this._parameters.callback||function(){};if(parameters.bind&&parameters.bind!=this._parameters.bind)this._BindEvents(parameters.bind);},_handleRotation:function(parameters){this._setupParameters(parameters);if(this._angle==this._parameters.animateTo){this._rotate(this._angle);}
else{this._animateStart();}},_BindEvents:function(events){if(events&&this._eventObj)
{if(this._parameters.bind){var oldEvents=this._parameters.bind;for(var a in oldEvents)if(oldEvents.hasOwnProperty(a))
jQuery(this._eventObj).unbind(a,oldEvents[a]);}
this._parameters.bind=events;for(var a in events)if(events.hasOwnProperty(a))
jQuery(this._eventObj).bind(a,events[a]);}},_Loader:function(parameters)
{var width=this._img.width;var height=this._img.height;this._rootObj.appendChild(this._img);this._rootObj.style.width=this._img.offsetWidth;this._rootObj.style.height=this._img.offsetHeight;this._img.style.position="absolute";this._rootObj=this._img;this._rootObj.Wilq32={PhotoEffect:this}
this._rootObj.style.filter+="progid:DXImageTransform.Microsoft.Matrix(M11=1,M12=1,M21=1,M22=1,sizingMethod='auto expand')";this._eventObj=this._rootObj;this._handleRotation(parameters);},_animateStart:function()
{if(this._timer){clearTimeout(this._timer);}
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)
{clearTimeout(this._timer);}
else
{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);}
if(this._parameters.step){this._parameters.step(this._angle);}
var self=this;this._timer=setTimeout(function()
{self._animate.call(self);},10);}
if(this._parameters.callback&&checkEnd){this._angle=this._parameters.animateTo;this._rotate(this._angle);this._parameters.callback.call(this._rootObj);}},_rotate:(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;this._rootObj.style.marginLeft=-(this._rootObj.offsetWidth-this._rootObj.clientWidth)/2+"px";this._rootObj.style.marginTop=-(this._rootObj.offsetHeight-this._rootObj.clientHeight)/2+"px";}
else if(supportedCSS)
return function(angle){this._angle=angle;this._img.style[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="//coursesweb.net/javascript" title="JavaScript-jQuery Course">coursesweb.net/javascript</a>.
</div>

<script>
jQuery(document).ready(function() {
 $('#idex1').rotate(-25);
});
</script>

Demo:
2. Simply rotate an image by 30 degrees.

<img src="image.jpg" width="120" height="45" alt="Rotate image" id="idex2" />

<script>
jQuery(document).ready(function() {
 $('#idex2').rotate(30);
});
</script>

Demo:

animateTo

- The animateTo attribute animates the rotation from current angle to given angle value.
Example:
    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.

<script>
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
 $(this).css('position','absolute');

 $(this).rotate({
 animateTo:angl
 });
 angl += 60; // increase the angle with 60 degrees to each rotation
 });
});
</script>

Demo:

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

<script>
jQuery(document).ready(function() {
 jQuery('#idex4').rotate({bind: {
 mouseover: function() { 
 $(this).rotate({
 duration: 2500,
 animateTo:-35
 })},
 mouseout: function() { 
 $(this).rotate({
 duration: 500,
 animateTo:0
 })}
 }
 });
});
</script>

Demo (mouseover text to see effect):

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

Example:
    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>

<script>
jQuery(document).ready(function() {
 var rotation = function (){
 jQuery('#idex5').rotate({
 angle:0, // reset rotation angle to 0 where to start the rotation
 // rotate 360 degrees (counter clockwise), in 3 secconds
 animateTo:-360, 
 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).stopRotate();
 jQuery(this).html('<br/> Angle: <b>'+ $(this).getRotateAngle()+ '</b>');
 }}
 });
 }

 rotation(); // call the function to start rotation
});
</script>

Demo (click on green rectangle):

<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>

#id {
  overflow: auto;
}

document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}

if(isset($_GET["id"])) {
  echo $_GET["id"];
}