Edit in JSFiddle

(function($) {

    /* 
    MooFx has these 3 important methods:
    - style
    - animate
    - compute
    */
    
    
    $("#experiment").style({
        "perspective": "800px"
    });

    var cube = $("#cube");

    cube.style({
        "transform-style": "preserve-3d"
    });

    $("#cube .one").style({
        "transform": "rotateX(90deg) translateZ(80px)"
    });

    $("#cube .two").style({
        "transform": "translateZ(80px)"
    });

    $("#cube .three").style({
        "transform": "rotateY(90deg) translateZ(80px)"
    });

    $("#cube .four").style({
        "transform": "rotateY(180deg) translateZ(80px)"
    });

    $("#cube .five").style({
        "transform": "rotateY(-90deg) translateZ(80px)"
    });

    $("#cube .six").style({
        "transform": "rotateX(-90deg) translateZ(80px) rotate(180deg)"
    });

    var x = 0,
        y = 0;

    $(document).on("keydown", function(e){

        switch (e.keyCode) {
            case 37: // left
                y -= 90;
                break;
            case 38: // up
                x += 90;
                break;
            case 39: // right
                y += 90;
                break;
            case 40: // down
                x -= 90;
                break;
        }

        cube.animate({
            "transform": "rotateX(" + x + "deg) rotateY(" + y + "deg)"
        });
    });

    var mx = 0,
        my = 0;

})(mootools.$);

<div id="experiment">
    <div id="cube">
        <div class="face one">One face</div>
        <div class="face two">Up, down, left, right</div>
        <div class="face three">Lorem ipsum.</div>
        <div class="face four">Some text</div>
        <div class="face five">Rotating 3D cube</div>
        <div class="face six">More content</div>
    </div>
</div>

body {
    font: 14px/150px Helvetica, Arial;
    margin: 0;
    padding: 0;
}

#cube {
    position: relative;
    margin: 100px auto 0;
    height: 150px;
    width: 150px;
}

.face {
    height: 150px;
    opacity: 0.8;
    position: absolute;
    text-align: center;
    width: 150px;
}

.face.one { background: red; }
.face.two { background: green; }
.face.three { background: yellow; }
.face.four { background: lightblue; }
.face.five { background: fuchsia; }
.face.six { background: orange; }