Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
60 lines (43 sloc) 2.65 KB
Zachary Johnson
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().
$('#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.
$('#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:
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