Chrome 21 scaling elements during rotation

UPDATE: Seems to be fixed now in Chrome 23. (See @joequincy comment on the original question)

Indeed, this seems like a bug. Until it is fixed, you can work around with the jQuery animate() function like this:

$(function() {    var rotation = 163;    $('body').on('click', function() {        rotation = (rotation == 163) ? 198 : 163;                       $('#wheel').animate({            borderSpacing: rotation        }, {            step: function(now, fx) {                $(this).css('-webkit-transform', 'rotate(' + now + 'deg)');                    $(this).css('-moz-transform', 'rotate(' + now + 'deg)');                    $(this).css('-ms-transform', 'rotate(' + now + 'deg)');                    $(this).css('-o-transform', 'rotate(' + now + 'deg)');                    $(this).css('transform', 'rotate(' + now + 'deg)');                }        });            });});​

Remove the transition CSS statements and add:

border-spacing: 163px;

This example misuses the border-spacing attribute, since it won't affect your layout in most cases.

See http://jsfiddle.net/hongaar/wLTLK/1/

(Thanks to this answer: Animate element transform rotate)

NOTE: You can optionally use the jQuery transform plugin to remove the ugly multiple css() calls and for a simpler version of the animate() syntax (but adding overhead). See https://github.com/louisremi/jquery.transform.js