ashernor / jquery-animate-css-rotate-scale Goto Github PK

-----------------------------
READ ME
-----------------------------
jquery-animate-css-rotate-scale
Zachary Johnson
www.zachstronaut.com

This monkey patch for jQuery 1.3.1+ allows you to:

1. Get and set rotate and scale CSS transforms independently with the added
   custom jQuery methods rotate() and scale().

   Examples:
   $('#example').rotate('30deg');
   $('#example').scale(1.5);
   $('#example').rotate('45deg');
   $('#example').scale(1.5).rotate('45deg'); // chaining
   $('#example').rotate(); // returns '45deg'
   $('#example').scale(); // returns '1.5'

2. Animate rotate and scale CSS transforms independently using jQuery's
   animate() method.

   Examples:
   $('#example').animate({rotate: '30deg', scale: '1.25'}, 1000);
   $('#example').animate({rotate: '+=30deg', scale: '-=0.1'}, 1000);

Browser Support
---------------
The CSS3 transform property (and therefore this patch) currently functions in
Safari/Chrome/Webkit, Firefox 3.5+, IE 9+, and Opera 11+.

Using This Patch
----------------
Load jquery-animate-css-rotate-scale.js after loading jQuery and
jquery-css-transform.js.  For example:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery-css-transform.js" type="text/javascript"></script>
<script src="jquery-animate-css-rotate-scale.js" type="text/javascript"></script>

For more information visit:
http://www.zachstronaut.com/

This code is currently available for use in all personal or commercial projects
under both MIT and GPL licenses, just like jQuery. 

-----------------------------
Change Log
-----------------------------

2012.10.23 - Firefox 16 transform style returns a matrix rather than a string of transform functions.  This broke the features of this jQuery patch in Firefox 16.  It should be possible to parse the matrix for both scale and rotate (especially when scale is the same for both the X and Y axis), however the matrix does have disadvantages such as using its own units and also 45deg being indistinguishable from 45+360deg.  To get around these issues, this patch tracks internally the scale, rotation, and rotation units for any elements that are .scale()'ed, .rotate()'ed, or animated.  The major consequences of this are that 1. the scaled/rotated element will blow away any other transform rules applied to the same element (such as skew or translate), and 2. the scaled/rotated element is unaware of any preset scale or rotation initally set by page CSS rules.  You will have to explicitly set the starting scale/rotation value.

2010.11.26 - Updated included dependency jquery-css-transform.js to newest version

2010.11.06 - Fixed chaining of scale() and rotate() by returning "this"

2009.07.15 - Added to GitHub