질문이요~

미해결질문
승어 프로필
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <style media="screen">
    body[data-char='ragirl'] {
      background: #ff7200;
    }

    body[data-char='ilbuni'] {
      background: dodgerblue;

    }

    body{
      height:500vw;
      font-family: 'Apple SD Gothic Neo', 'Roboto', 'Noto Sans KR', NanumGothic, 'Malgun Gothic', sans-serif;
      -webkit-overflow-scrolling: touch;
      color: #555;

    }

    .world{
      position: fixed;
      left: 0;
      top: 0;
      width: 100vw;
      height: 100vh;
      perspective: 1000px;
    }
    .house {
      width: 100vw;
      height: 100vh;
      transform: translateZ(-490vw);
      transform-style: preserve-3d;

    }

    .wall-front-a { transform: translateZ(300vw); }
    .wall-front-b { transform: translateZ(50vw); }
    .wall-front-c { transform: translateZ(-200vw); }
    .wall-front-d { transform: translateZ(-500vw); }

    .wall-content{
      position: absolute;
      display:flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }
    h2{
      font-size: 15rem;
    }

  </style>
</head>

<body>
  <div class="click-button">
    <button class="buttonboy" data-char="ilbuni"></button>
    <button class="buttongirl" data-char="ragirl"></button>
  </div>
  <div class="progress-bar-con">
    <div class="progress-bar"></div>
  </div>
<div class="world">
  <div class="house">

    <div class="wall-front-a">
      <div class="wall-content">
        <h2 class="wall-title">안녕하세요</h2>
      <!-- <img src="Bible.png" alt=""> -->
      </div>
    </div>

    <div class="wall-front-b">
      <div class="wall-content">
        <h2 class="wall-title">Hello</h2>
      <!-- <img src="K-108.png" alt=""> -->
    </div>
    </div>

    <div class="wall-front-c">
      <div class="wall-content">
        <h2 class="wall-title">Hola</h2>
      <!-- <img src="Bible.png" alt=""> -->
    </div>
    </div>

    <div class="wall-front-d">
      <div class="wall-content">
        <h2 class="wall-title">こんにちは</h2>
      <!-- <img src="K-108.png" alt=""> -->
    </div>
    </div>

  </div>
</div>


  <script type="text/javascript">
(function () {

const houseElem = document.querySelector('.house');
let maxScrollValue;

window.addEventListener('scroll',function () {
  const scrollPer = pageYOffset / maxScrollValue;
  const zMove = scrollPer *980 -450;
  houseElem.style.transform = 'translateZ('+zMove+'vw)';
})

function resize() {
  maxScrollValue = document.body.offsetHeight - window.innerHeight;
}
resize();


})();
  </script>
</body>

</html>

 

복습하면서 예제랑 비슷하면서 간단하게 만들려고 위에처럼 코드를 짜봤는데 스크롤 움직이면 제대로 작동은 하는데 폰트들이 왼쪽으로 휘면서 커지네요...

이건 어떤 문제가 있는걸까요??

1분코딩 프로필
1분코딩 2019.09.04

CSS에

.wall-front-a, .wall-front-b, .wall-front-c, .wall-front-d { display: flex; justify-content: center; }

를 추가해보세요.

각 wall 내부의 텍스트가 가운데 정렬이 안되어있어서 그렇습니다~

지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스