Exploring box2dweb has been a blast for me. The code snippet below is part of my step method that gets executed approximately 30 times per second. It currently works fine, but I'm wondering if there's room for improvement:
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;
I am considering using CSS3 translate to move the object:
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;
Is there a way to simultaneously apply rotation and translation? And would this potentially improve performance?