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

$('.element').getRotationDegrees()

Returns the current rotation of the element in degrees.

$('.element').rotBy(val)

Rotates the current element by “val” degress.

$('.element').rotTo(val)

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:

<script type="text/javascript" src="http://yourdomain.com/js/jquery.rotel.js"></script>

After that you can use the new functions wherever you want to:

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

jQuery element rotation plugin (2412)

Ernest Marcinko

WordPress developer, javascript enthusiast, photoshop clicker and the founder of wp-dreams.com

Stay connected

Related Posts
Filter by
Post Page
Blog Reviews Tutorials jQuery Wordpress Free Plugins Wordpress Hosting
Sort by

Using Ajax in your WordPress plugins

2014-04-14 13:23:29
admin

18

Item Transition Inspiration with jQuery

2014-03-21 19:26:44
admin

18

Related posts lite - free plugin

2014-08-08 09:10:54
admin

10

Saving space automatically – Beginners guide to Digital Ocean

After a while, you will notice an exponential growth of used space, without even copying anything to it. How
2016-05-06 09:24:05
admin

8

Comments 2

  1. Pingback: Elements Rotation in web design | Webelizer

Leave a Reply

Your email address will not be published. Required fields are marked *