Moving your sprite around using CSS Transforms

Using CSS Transforms is a simple hack that allows you to move objects on the screen much faster than it does with the use of CSS top and left properties. If you decide to use this, you have to be aware that not all browsers support it.

We won't go into too much detail because CSS Transforms are explained in the next chapter, Looking Sideways. The following code is the modification required to use CSS Transforms:

gf.x = function(divId,position) {
    if(position) {
        var data = $("#"+divId).data("gf");
        var y = data.y;
        data.x = position;
        $("#"+divId).css("transform", "translate("+position+"px, "+y+"px)");
    } else {
        return $("#"+divId).data("gf").x; 
    }
}
gf.y = function(divId,position) {
    if(position) {
        var data = $("#"+divId).data("gf");
        var x = data.x;
        data.y = position;
        $("#"+divId).css("transform", "translate("+x+"px, "+position+"px)"); 
    } else {
        return...