<aside> 💡 룰렛머신을 CSS와 HTML 그리고 JS를 이용해 어떻게 만들 수 있을지, 특히 CSS에 대해 정리해볼 예정이다.

</aside>

1. HTML 준비하기

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="stage">
      <div class="rotate">
        <div class="ring">
          <div class="poster">
            <p>1</p>
          </div>
          <div class="poster">
            <p>2</p>
          </div>
          <div class="poster">
            <p>3</p>
          </div>
          <div class="poster">
            <p>4</p>
          </div>
          <div class="poster">
            <p>5</p>
          </div>
          <div class="poster">
            <p>6</p>
          </div>
          <div class="poster">
            <p>7</p>
          </div>
          <div class="poster">
            <p>8</p>
          </div>
          <div class="poster">
            <p>9</p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

2. CSS 적용하기

해당 앱의 CSS를 구성할때, 기본적인 컨셉은 다음과 같다.

  1. 각각의 숫자가 돌아가게 한다.

  2. 숫자 div에 rotateX와 translateZ를 적용하여, 아래와 같은 세로로 세워진 원통형을 만든다.

    Untitled

  3. 원통형이 세로로 회전 할 수 있도록 애니메이션을 만들어 적용한다.


.stage {
  margin: 150px auto;
  margin-top: 200px;
  width: 600px;
  height: 400px;
  /*
  
  Setting the perspective of the contents of the stage
  but not the stage itself
  
  */
  -webkit-perspective: 800;
}
.rotate {
  margin: 0 auto;
  width: 600px;
  height: 400px;
  -webkit-transform-style: preserve-3d;
}
.ring {
  margin: 0 auto;
  height: 110px;
  width: 600px;
  -webkit-transform-style: preserve-3d;
  animation-name: x-spin;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  gap: 20px;
}

.ring > :nth-child(odd) {
  background-color: #995c7f;
}
.ring > :nth-child(even) {
  background-color: #835a99;
}

.poster {
  position: absolute;
  left: 250px;
  width: 100px;
  height: 100px;
  opacity: 0.7;
  color: red;
  -webkit-border-radius: 10px;
}
.poster > p {
  font-family: "Georgia", serif;
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  margin-top: 28px;
}

.ring > :nth-child(1) {
  -webkit-transform: rotateX(0deg) translateZ(200px);
}
.ring > :nth-child(2) {
  -webkit-transform: rotateX(40deg) translateZ(200px);
}
.ring > :nth-child(3) {
  -webkit-transform: rotateX(80deg) translateZ(200px);
}
.ring > :nth-child(4) {
  -webkit-transform: rotateX(120deg) translateZ(200px);
}
.ring > :nth-child(5) {
  -webkit-transform: rotateX(160deg) translateZ(200px);
}
.ring > :nth-child(6) {
  -webkit-transform: rotateX(200deg) translateZ(200px);
}
.ring > :nth-child(7) {
  -webkit-transform: rotateX(240deg) translateZ(200px);
}
.ring > :nth-child(8) {
  -webkit-transform: rotateX(280deg) translateZ(200px);
}
.ring > :nth-child(9) {
  -webkit-transform: rotateX(320deg) translateZ(200px);
}

//animation to rotate the slot
@-webkit-keyframes x-spin {
  0% {
    -webkit-transform: rotateX(0deg);
  }
  50% {
    -webkit-transform: rotateX(180deg);
  }
  100% {
    -webkit-transform: rotateX(360deg);
  }
}

** **Error Handling / Question ****

1. translateZ가 적용되지 않는 문제