css transform matrix vs rotate + translate (v3)

Revision 3 of this benchmark created by Augusto on

Preparation HTML

<script src="http://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 = navigator.userAgent.toLowerCase().indexOf('mozilla')>-1 ? '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 (navigator.userAgent.toLowerCase().indexOf('msie')>-1) {
  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 (navigator.userAgent.toLowerCase().indexOf('msie')>-1) {
  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.