translate3d vs translateXYZ (v17)

Revision 17 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
  #box{ background-color: #f6f6f6;
background-color: #f00;
display: inline;
width: 100px;
z-index: 1040;
height: 100px;
position: fixed;
top: 0;
overflow: scroll;
-webkit-transform: translate3d(-100px, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: all 0.75s ease-in-out;
transition: all 0.75s ease-in-out;
}
</style>
<div id="box">
  Shake Me!
</div>

Setup

var style = document.getElementById('box').style;

Test runner

Ready to run.

Testing in
TestOps/sec
translate3D
var X = Math.floor(Math.random() * 200);
style.webkitTransform = "translate3D(" + X + "px," + X + "px, 0)";
ready
translateXYZ
var X = Math.floor(Math.random() * 200);
style.webkitTransform = "translateX(" + X + "px)";
ready
TranslateXY
var X = Math.floor(Math.random() * 200);
style.webkitTransform = "translate3D(" + X + "px," + X + "px, 0.1)";
ready
translate3D z not zero
var X = Math.floor(Math.random() * 200);
style.left = X + "px";
ready

Revisions

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