jQuery Patch: Animate CSS Rotation and Scale

published:
2009.08.07
topics:
css
javascript

Fork me on GitHub

I have created a monkey patch for jQuery (tested through 1.6) which enables you to independently set and/or animate both the scale and rotation of any HTML content with jQuery. This code uses the scale() and rotate() CSS transformations that are only supported by Webkit, Safari, Chrome, Firefox 3.5+, IE9, and some versions of Opera at this time.

As an example I have some spinning HTML content below. You can click the content to increase its scale while it continues to spin. Try it out:

Click me to scale up!

After applying my patch, the following jQuery code is used to create this example:

setInterval(
    function () {
        $('#at_ex1').animate({rotate: '+=10deg'}, 0);
    },
    200
);

$('#at_ex1').click(
    function () {
        $(this).animate({scale: '+=0.33'}, {queue: false, duration: 1000});
    }
);

Features of this Patch:

  1. Get and set rotate and scale CSS transforms independently with the added custom jQuery methods rotate() and scale(). These work like setting any other CSS property, i.e. you are rotating to an angle not rotating by an angle. Example syntax:
    $('#example').rotate('30deg'); // rotates to 30deg
    $('#example').scale(1.5); // scales to 150%
    $('#example').rotate('45deg'); // rotates to 45deg
    $('#example').rotate(); // will return '45deg'
    $('#example').scale(); // will return '1.5'
            
  2. Animate rotate and scale CSS transforms independently using jQuery's animate() method. This works like any other jQuery CSS animation, i.e. you can rotate to a specific angle, or you can increase or decrease the angle of rotation by any number of degrees. Here are examples of both syntaxes:
    // Rotate to 30deg and scale to 125%
    $('#example').animate({rotate: '30deg', scale: '1.25'}, 1000);
    // Rotate by 30deg from current position and scale down by 10%
    $('#example').animate({rotate: '+=30deg', scale: '-=0.1'}, 1000);
            

Download, Usage, Related Links

This patch requires another one of my jQuery patches that adds CSS transform support to jQuery. The file jquery-css-transform.js should be included in your download.

An important note for jQuery 1.4.3+ users: As of jQuery 1.4.3, the default behavior when fetching a CSS transform property with jQuery changed. Prior to 1.4.3 the value returned was the string value of the CSS transform as defined by the user such as 'rotate(30deg)' or 'scale(1.5)'. As of 1.4.3, the value returned was a string representing the six value transformation matrix itself. Because people using this patch may have written code that relies on the older behavior, and because this animation patch relies on this older behavior, I have decided to update my patch to force 1.4.3 to return the string of the transform as defined by the user instead of the matrix. This means if you apply my patch to your jQuery 1.4.3, other people's transform code that relies on this new 1.4.3 behavior may not work. (My other option -- and something I may do in the future -- would be to internally map all string transform rules into a transformation matrix inside of my patch.)

To use 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>