3D 애니메이션

요소의 뒷면을 보지 않는 backface-visibility: hidden;옵션을 이용한 3D 애니메이션

코드

HTML

  <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 class="btn" href="javascript:void(0)">매장 보기</a>
        </div>
      </div>

    </div>
  </section>

CSS

.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: .7s;
}

.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: 230px;
  left: 0;
  right: 0;
  margin: auto;
}