# 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;
}

#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; }
```