Building Games with CSS3 - HTML5 Mobile Game Development - page 220

NOTE The downside to using transforms is that none of the transform properties are guaranteed to be
vendor-prefix free, so each of the vendor prefixes needs to be considered when trying to find support for the
best positioning method available. If translate3d isn't supported, translate will be used; otherwise
plain old top and left positioning will be done.
The code is first going to check if CSS3 transform support is available, and if it is, check if translate3d
(which triggers hardware-accelerated support in WebKit) is available. If so, a method called trans-
late3DBuilder is called that returns another method that is customized to the proper prefix. JavaScript
makes it easy to create methods that return methods through the power of closures. The translate3d isn't
supported; translateBuilder is called to return a method that does non-3d transforms.
Add the code in Listing 12-2 to the bottom of quintus_dom.js before the final closing curly brace.
Listing 12-2: Checking for translation support
(function() {
function translateBuilder(attribute) {
return function(dom,x,y) {
dom.style[attribute] =
"translate(" + Math.floor(x) + "px," +
Math.floor(y) + "px)";
};
}
function translate3DBuilder(attribute) {
return function(dom,x,y) {
dom.style[attribute] =
"translate3d(" + Math.floor(x) + "px," +
Math.floor(y) + "px,0px)";
};
}
function scaleBuilder(attribute) {
return function(dom,scale) {
dom.style[attribute + 'Origin'] = "0% 0%";
dom.style[attribute] = "scale(" + scale + ")";
};
}
function fallbackTranslate(dom,x,y) {
dom.style.left = x + "px";
dom.style.top = y + "px";
}
var has3d = ('WebKitCSSMatrix' in window &&
'm11' in new WebKitCSSMatrix());
var dummyStyle = $("<div>")[0].style;
var transformMethods = ['transform',
'webkitTransform',
'MozTransform',
'msTransform' ];
for(var i=0;i<transformMethods.length;i++) {