jQuery css vs style.webkitTransform (translate3d) (v3)

Revision 3 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="box" style="position: absolute; width: 200px; height: 200px;"></div>
<script>
  var div = $('#box');
  var elm = div.get(0);
  var x = 0;
  var y = 0;
  var matrix = new WebKitCSSMatrix();
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
.css()
div.css('-webkit-transform', 'translate3d(' + (x++) + 'px,' + (y++) + 'px,0)');
ready
.style.webkitTransform
elm.style.webkitTransform = 'translate3d(' + (x++) + 'px, ' + (y++) + 'px,0)';
ready
css() (WebKitCSSMatrix)
elm.style.left= (x++) + 'px';
elm.style.top= (y++) + 'px';
ready
.style.webkitTransform (WebKitCSSMatrix)
matrix.e = x++;
matrix.f = y++;

elm.style.webkitTransform = matrix;
 
ready

Revisions

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