jQuery element rotation plugin

Ernest Marcinko Blog, Tutorials 2 Comments

In my previous project I needed to rotate some elements, but I hadn’t found any jQuery plugins regarding this issue. (which of course works with ie7 and ie8 as well!)

So I decided to take some time and write this small snippet for jQuery to make the CSS3 rotation easier. It’s a little slow with internet explorer 7 and internet explorer 8, but it still works. (since ie7 and 8 use the deprecated filter method)

Funcions

[javascript]$(‘.element’).getRotationDegrees()[/javascript] Returns the current rotation of the element in degrees.
[javascript]$(‘.element’).rotBy(val)[/javascript] Rotates the current element by “val” degress.
[javascript]$(‘.element’).rotTo(val)[/javascript] Rotates the current element to “val” degress.

And basically that’s it. You can use these functions to achieve the basic rotations with jQuery.

Usage

First of all include the scrip in your header file:

After that you can use the new functions wherever you want to:
[javascript] jQuery(document).ready(function() {
(function($) {
if ( $(‘.element’).getRotationDegrees()<90) { $('.element').rotTo(90); //rotate the elements with class .element to 90 degrees } else { $('.element').rotBy(10); //rotate the elements with class .element by 10 degrees } }(jQuery)); }); [/javascript] You can make your animations easier and work with IE7 and 8!

Download

[download id=”2″]

Comments 2

  1. Pingback: Elements Rotation in web design | Webelizer

Leave a Reply

Your email address will not be published.