Rotate
The simple, easy-to-implement animation plugin to rotate icons, images, and elements.
Getting Started
Download and Setup
To use this plugin, include the jQuery library and the Rotate.js plugin before the closing <body> tag of your HTML document:
<script src="jquery.js"></script> <script src="rotate.js"></script>Install with Bower
$ bower install rotate.jsInstall with npm
$ npm install rotate-iconDependencies
Required:
jQuery (1.2.1 or higher)
Usage
JavaScript
To use the export plugin, just call:
$("#my-selector").rotate();You can also specify an angle of rotation (in degrees).
$("#my-selector").rotate(720);Additional properties can be passed in to customize the timing and overall behavior of the animation.
/* Defaults */ $("#my-selector").rotate(360, { // [Number] animation rotation (degrees) duration: 1000, // [Number] animation duration easing: 'swing', // [String] easing function complete: function () { } // [Function] completed callback });Settings
Below are the plugin defaults.
/* default animation rotation (degrees) */ $.fn.rotate.degrees = 360; /* default duration, easing, and completed callback */ $.fn.rotate.defaults = { duration: 1000, easing: 'swing', complete: function () { } };Browser Support
| Chrome | Firefox | IE | Opera | Safari | |
|---|---|---|---|---|---|
| Android | ✓ | ✓ | ✓ | ✓ | ✓ |
| iOS | ✓ | ✓ | ✓ | ✓ | ✓ |
| Mac OSX | ✓ | ✓ | ✓ | ✓ | ✓ |
| Windows | ✓ | ✓ | ✓ | ✓ | ✓ |
Live Demo
A live, interactive demo can be found here:
www.travismclarke.com
License
Rotate.js is licensed under the terms of the MIT License
Credits
- John Resig - jQuery
