translate3d vs translateXYZ (v3)

Revision 3 of this benchmark created on

Preparation HTML

<style>
  #box{ position: relative; left: 20px; right: 20px; border: 1px solid red; width:
  200px; height: 200px; line-height: 200px; text-align: center; vertical-align: center;
  background: red; }
</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() * 20);
style.webkitTransform = "translate3D(" + X + "px," + X + "px, 0)";
ready
translateXYZ
var X = Math.random() * 20;
style.webkitTransform = "translateX(" + X + "px) translateY(" + X + "px)  translateZ(0)";
ready
TranslateXY
var X = Math.random() * 20;
style.webkitTransform = "translateX(" + X + "px) translateY(" + X + "px)";
ready

Revisions

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