One of the plugins Axel lists within his code is jQueryRotate, authored by Paweł Witkowski. Here we’ll take a closer look at this plugin by demonstrating some of the quick options it gives you for applying image rotations – either at set angles or within smoother animations. You can trigger these to start when the page loads or on mouse rollover events – then you can investigate the more advanced parameters to achieve more sophisticated results.
1) Get plugin files
Begin by visiting code.google.com/p/jqueryrotate/ to download the plugin. Follow the links on the left panel under Featured>Downloads to click the green download buttons and obtain the files. You can use either, so grab jQueryRotate.2.2.js or alternatively jQueryRotateCompressed.2.2.js and simply drop into the root of your page.
2) Link the scripts
In the <head> of your HTML add a <script src=””> declaration for jQuery. Here we’ve linked to the latest version on the online repository. Below this you must place another <script src=””> tag pointing to one of the .js files you downloaded in Step 1.
3) Image stack
Next up we’ve added a row of four PNG icons to our page <body>, which reside in the root of our document. In addition to any style classes you may wish to add, you’ll need to give each one an id attribute.
4) Simplest tilt
Add new <script> tags to the page head and then a $(document).ready() function. This is where all code will go, but start with the most basic jQueryRotate method by tilting the first icon by 60 degrees.
5) Mouseover events
Preview the page and you’ll notice the rotation occurs immediately. Now we will extend the method to trigger a 45-degree tilt when the cursor passes over
icon2.png. This can be done using the bind command to attach mouseover and mouseout events like so.
6) Smoother tilt
By adding an animateTo command before our angle values, the plugin makes the rotation motion much smoother. We’ll try this on icon3.png and rotate it 210-degrees, then back to zero when the mouse moves off. Save the page and preview to check the effect.
7) Keep on spinning
The plugin suggests methods for spinning images endlessly from page load, the first of which uses the setInterval() function. Here you are able to alter angle increments as well as the millisecond speed value to change the effect.
