3D 애니메이션으로 앞뒤 회전하기

앞

뒤

 

---

 

1. 앞, 뒷면 만들기

 <!-- 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 btn--gold">자세히 보기</a>
      </div>
      
    </div>
    
  </div>

 </section>

 

 

2. 회전시켰을 때 뒷면 안 보이기

(힌트)

perspective / backface-visibility / transform: rotateY( )

🚨 3D 애니메이션

📍부모 요소에 perspective를 주고 

📍자식 요소에 transition, backface-visibilty: hidden, transform: rotateY를 줄 수 있다.

📍transform 방향

 ㄴ transform: rotateY(0)은 원래 상태다.

 ㄴ transform: rotateY(180/-180)은 뒤집어진 상태다.

📍자식요소들을 position: absolute하여 이미지 위치를 겹치는 상태로 만들 것

/* 3D */
.reserve-store {
  background-image: url("../images/reserve_store_bg.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  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 {
  position: absolute;
  width: 334px;
  height: 334px;
  backface-visibility: hidden;
  transition: 1s;
}

.reserve-store .medal .front {
  /* position: absolute;  앞면과 뒷면을 동일한 곳에 위치시킬 때 */
  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 .btn {
  position: absolute;
  top: 210px;
  left: 0;
  right: 0;
  margin: auto;
}