¿Cómo hacer transform:translate con puro javascript?

[Alexis88]

Viendo el ejemplo en la página que dejaste, hice algo distinto:

Código HTML:

<div id = "capa"></div>
<button id = "ar">Arriba</button>
<button id = "ab">Abajo</button>
<button id = "iz">Izquierda</button>
<button id = "de">Derecha</button>
 

Código CSS:

#capa{
    position: absolute;
    background: radial-gradient(ellipse, white, yellow);
    width: 50px;
    height: 50px;
    margin-top: 5em;
    border: .1em #aa0 solid;
}
 

Código Javascript:

var div = document.getElementById("capa");
 
window.addEventListener("click", function(e){
    switch(e.target.id){
        case "ar":
            div.style.top -= 2;  
        break;
      
        case "ab":
            div.style.bottom -= 2;
        break;
      
        case "iz":
            div.style.left -= 2;  
        break;
      
        case "de":
            div.style.right -= 2;
        break;
    }
}, false);
 

De este modo, cada vez que de un clic, tomo el Id del elemento al que se le dio el clic (target = elemento objetivo) y según el Id, muevo el Div hacia una dirección en particular. Te dejo otra opción para hacerlo, utilizando el método animate de jQuery:

Código Javascript:

$(window).click(function(e){
    switch (e.target.id){
        case "ar":
            $("#capa").animate({top: "-=5em"}, 300);
        break;
        
        case "ab":
            $("#capa").animate({top: "+=5em"}, 300);
        break;
        
        case "iz":
            $("#capa").animate({left: "-=5em"}, 300);
        break;
        
        case "de":
            $("#capa").animate({left: "+=5em"}, 300);
        break;
    }
});
 

El resultado: http://jsbin.com/turiq/1

Saludos