Comment est-ce fait

Question

J'ai vu un exemple très intéressant d'utiliser html5 css3 et javascript qui est incroyable, alors pouvez-vous me dire comment est-il possible de le faire sans flash, je veux vraiment savoir comment faire des choses comme ça. Qu'est-ce qu'ils utilisent? Mais la plupart du temps je veux savoir comment ils ont fait l'effet avec tetbox et bouton. Voici The link

Answer 1

Tout est le code là-dedans. Je vous suggère de tout télécharger et de jouer avec, de déterminer ce que fait quoi, et de poser une nouvelle question s'il y a un problème particulier que vous ne comprenez pas.

Le principal peu intelligent qui se passe ici (en 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(); 
    } 
}, 

et ici:

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(); 
} 

Que tout repose sur trans3d.js, qui ne les transforme CSS nécessaires.

Answer 2

Ou utilisez votre navigateur voir la fonctionnalité de source de la page ou installer firebug