Question

I saw very interesting example of using html5 css3 and javascript that is amazing, so can you tell me how is it possible to do this without flash, I really want to know how to do things like that. What are they using? But the mostly I want to know how they did the effect with tetbox and button. Here is
The link

Answer 1

All the code’s in there. I suggest you download it all and have a play with it, work out what does what, and ask a new question if there’s a particular bit you don’t understand.

The main clever bit happens here (in test.js):

onMove: function(e) {
    if (e.pageX >= 0 && e.pageY) {
        this.rot = e.pageX*0.006-0.9;

        this.tilt = (TILT_BASE - e.pageY*0.004);
        if (this.tilt < 0.5) this.tilt = 0.5;

        if (!this.playing)
            this.doAnimation();
    }
},

and here:

updateTransform: function() {
    this.box.localTrans.rotY(this.rot_cur);
    this.box.localTrans._42 = (80-this.box.height)/2;
    this.rootTransMatrix.rotX(this.tilt_cur);
    this.rootTransMatrix._42 = (80-this.box.height)/2;
    this.floorFace.postTrans.translate(-28, -88 - this.box.localTrans._42, 0);

    this.box.applyTransform();
    this.floorFace.applyTransform();
}

That all relies on trans3d.js, which does the necessary CSS transforms.