javascript - CSS3 と Javascript を使用して、アニメーションの移動と回転を同時に行う

Question

box2dweb を楽しんでいます。次のコードは、約 30/秒で呼び出される私のステップ メソッドにあります。

var img = body.GetUserData();
var pos = body.GetPosition();
var newPos = {x: meterToPixelCenter(pos.x,scale,img.width) , y:meterToPixelCenter(pos.y,scale,img.height)};

img.style.left = newPos.x + 'px';
img.style.top = newPos.y + 'px';

var style = 'rotate(' + (body.GetAngle() * 57.2957795) + 'deg) translateZ(0)';
img.style.WebkitTransform = style;
img.style.MozTransform = style;
img.style.OTransform = style;
img.style.msTransform = style;
img.style.transform = style;

オブジェクトの移動に CSS3 translate を使用したいと思います。

var stylePos = 'translate(' + newPos.x + 'px' + ',' + newPos.y + 'px' + ')';
img.style.WebkitTransform = stylePos;
img.style.MozTransform = stylePos;
img.style.OTransform = stylePos;
img.style.msTransform = stylePos;
img.style.transform = stylePos;

var style = 'rotate(' + (body.GetAngle() * 57.2957795) + 'deg) translateZ(0)';
img.style.WebkitTransform = style;
img.style.MozTransform = style;
img.style.OTransform = style;
img.style.msTransform = style;
img.style.transform = style;

両方 (回転と平行移動) を行うにはどうすればよいですか? これによりパフォーマンスが向上しますか?