코딩 질문

style.css

body {

  font-family: 'Times New Roman', Times, serif, 나눔고딕;

  -webkit-overflow-scrolling: touch;

  color: #555;

  background: #fff000;

}

.world {

  position: fixed; /* 스크롤을 내려도 계속 같은 화면이 보이기 위해서*/

  left: 0;

  top: 0;

  width: 100vw;

  height: 100vh; /* 창에 꽉 차도록*/  

  perspective: 1000px;

}

.stage {

  /* 하우스안에 벽이 있고 캐릭터들은 하우스 밖과 월드 사이에 있기 때문에 스테이지 생성 */

  position: absolute;

  left: 0;

  top: 0;

  width: 100vw;

  height: 100vh;

  transform-style: preserve-3d;

  /* 월드에서의 3d가 그 밑(자식)의 효과까지 적용되기 위에서 세팅함, ie11에서도 적용안함 webkit적용된 브라우저에서 잘 적용됨 ㅎ*/

}

.house {

  left: 0;

  top: 0;

  width: 100vw;

  height: 100vh;

  transform-style: preserve-3d;

}

.wall {

  position: absolute;

  left: 0;

  top: 0;

  width: 100vw;

  height: 100vh;

  background: rgba(255, 255,255, 0.8);

  

}