9. 스타벅스 3D 애니메이션

---

스타벅스 3D 애니메이션 HTML

<!-- RESERVE STORE -->
<section class="reserve-store">
  <div class="inner">

    <div class="medal">
      <div class="front"> 
        <img src="./images/reserve_store_medal_front.png" alt="" />
      </div>
      <div class="back">
        <img src="./images/reserve_store_medal_back.png" alt="" />
        <a href="javascript:void(0)" class="btn">매장 안내</a>
      </div>
    </div>

  </div>
</section>

• 메달의 앞면과 뒷면을 각각의 이미지로 지정
• 뒷면에는 매장 안내 버튼을 만든다.

---

스타벅스 3D 애니메이션 CSS

/* RESERVE STORE */
.reserve-store {
  background-image: url("../images/reserve_store_bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}
.reserve-store .inner {
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.reserve-store .medal {
  width: 334px;
  height: 334px;
  perspective: 600px;
}
.reserve-store .medal .front,
.reserve-store .medal .back {
  width: 334px;
  height: 334px;
  position: absolute;
  backface-visibility: hidden;
  transition: 1s;
}
.reserve-store .medal .front {
  transform: rotateY(0deg);
}
.reserve-store .medal:hover .front {
  transform: rotateY(180deg);
}
.reserve-store .medal .back {
  transform: rotateY(-180deg);
}
.reserve-store .medal:hover .back {
  transform: rotateY(0deg);
}
.reserve-store .medal .back .btn {
  position: absolute;
  top: 240px;
  left: 0;
  right: 0;
  margin: auto;
}

 

reserve-store class

• 배경 이미지는 reverse-store_bg.jpg로 지정
• 배경 이미지는 반복되는 속성을 없애줌.
• 배경 이미지의 위치를 가운데로 지정
• 배경 이미지는 움직이지 않도록 함.
• 배경 이미지는 사용하는 요소에 맞게끔 확대 또는 축소하도록 한다.

inner class

• 세로 600px
• 수평정렬
• 요소 가운데 지정
• 요소 블럭 가운데 지정

medal class

• 가로 334px
• 세로 334px
• 원근법 600px로 하기로 함.

front class,

back class

• 가로 334px
• 세로 334px
• reserve-store class를 기준으로 위치 지정
• back부분이 안보이도록 지정
• 전환 효과 1초

front class

• y축으로 0도 돌렸다고 hover를 알아보기 쉽게 하기 위해서 작성함.

front class hover

•  마우스 커서를 가져다 댈 경우 y축으로 180도로 만들어 front가 안보이도록 함.

back class

• y축으로 -180도 돌려 앞면 뒤에 붙어 있을 수 있도록 함.

back class hover

• 마우스 커서를 가져다 댈 경우 y축으로 0도로 만들어 앞면에 보이도록 함. 

btn

• back class를 기준으로 위치 지정
• 위로부터 240px에 위치 지정
• 왼쪽으로부터 0, 오른쪽으로부터 0, margin은 auto로 하여 가운데 정렬

---

스타벅스 3D 애니메이션 최종 완성