css transform matrix vs rotate + translate

Benchmark created by steex on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script>
  calculateMatrix = function(rotation) {
    rad = this.rotation * Math.PI * 2 / 360, costheta = Math.cos(rad).toFixed(4), sintheta = Math.sin(rad).toFixed(4),
  
    m = {
      M11: costheta,
      M12: -sintheta,
      M21: sintheta,
      M22: costheta
    };
  
    return m;
  }
  var style, ax, ay, min,
  
  units = $.browser.mozilla ? 'px' : '';
  
  ax = 500;
  ay = 400;
  rotation = 45;
  
  obj = $('<div style="width:100;height:100;position:absolute;"></div>');
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
matrix
m = calculateMatrix(rotation);
style = ['matrix(', m.M11, ', ', m.M21, ', ', m.M12, ', ', m.M22, ', ', ax.toFixed(3), units, ', ', ay.toFixed(3), units, ')'].join('');

origin = '0 0';
if ($.browser.msie && $.browser.version == 9) {
  obj[0].style.msTransform = style;
  obj[0].style.msTransformOrigin = origin;
} else {
  obj.css({
    '-moz-transform-origin': origin,
    '-webkit-transform-origin': origin,
    '-o-transform-origin': origin,
    'transform-origin': origin
  });

  obj.css({
    '-moz-transform': style,
    '-webkit-transform': style,
    '-o-transform': style,
    'transform': style
  });
}
ready
rotate
units = 'px';
style = ['translate(', ax.toFixed(3), units, ', ', ay.toFixed(3), units, ')'].join('') + ' ' + ['rotate(', rotation, 'deg)'].join('');

origin = '0 0';
if ($.browser.msie && $.browser.version == 9) {
  obj[0].style.msTransform = style;
  obj[0].style.msTransformOrigin = origin;
} else {
  obj.css({
    '-moz-transform-origin': origin,
    '-webkit-transform-origin': origin,
    '-o-transform-origin': origin,
    'transform-origin': origin
  });

  obj.css({
    '-moz-transform': style,
    '-webkit-transform': style,
    '-o-transform': style,
    'transform': style
  });
}
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.