어떻게 만들어 졌는가

Question

html5 css3과 javascript를 사용하여 매우 재미있는 예제를 보았습니다. 그렇다면 플래시없이 이것을 할 수있는 방법을 말해 줄 수 있습니까? 정말 그런 식으로 일하는 법을 알고 싶습니다. 그들은 무엇을 사용하고 있습니까? 하지만 대부분은 그들이 tetbox와 버튼으로 어떻게 효과를 냈는지 알고 싶습니다. 여기 The link

Answer 1

모든 코드의 거기에 설치합니다. 나는 당신이 그것을 다 다운로드하고 그것으로 놀아 볼 것을 제안하고, 무엇을하고 무엇을하는지 알아 내고, 당신이 이해하지 못하는 특정한 비트가 있다면 새로운 질문을 던지라고 제안한다.

주요 영리한 비트 (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(); 
    } 
}, 

여기 :

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

모든 필요한 CSS의 변환을 수행하는 trans3d.js에 의존하고있다.

Answer 2

어느 쪽이 당신의 브라우저가 페이지 소스 기능을 볼 사용하거나 firebug