스타벅스 랜딩 페이지 예제 (css로 3D 애니메이션)

DEMO+signin

3D 애니메이션

---

html

  <!-- RESEVE STORE -->
  <section class="reseve-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:viod(0)" class="btn">매장안내</a>
        </div>
      </div>

    </div>
  </section>

css

/* RESEVE STORE */
.reseve-store {
  background-image: url("../images/reserve_store_bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}
.reseve-store .inner{
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.reseve-store .medal{
  width: 334px;
  height: 334px;
  perspective: 600px;
}

/* 3D 애니메이션 start */
.reseve-store .medal .front,
.reseve-store .medal .back{
  width: 334px;
  height: 334px;
  position: absolute;
  backface-visibility: hidden;
  transition: 1s;
}
.reseve-store .medal .front{
  transform: rotateY(0deg);
}
.reseve-store .medal:hover .front{
  transform: rotateY(180deg);
}
.reseve-store .medal .back{
  transform: rotateY(-180deg);
}
.reseve-store .medal:hover .back{
  transform: rotateY(0deg);
}
/* 3D 애니메이션 end */

.reseve-store .medal .back .btn{
  position: absolute;
  top: 240px;
  left: 0;
  right: 0;
  margin: auto;
}

새로 배운 css기능 (backface-visibility)

---

요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성

backface-visibility

backface-visibility는 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성입니다.

기본값 : visible
상속 : No
애니메이션 : No
버전 : CSS Level 3

문법

backface-visibility: visible | hidden | initial | inherit

• visible : 보이게 합니다. 기본값입니다.
• hidden : 보이지 않게 합니다.
• initial : 기본값으로 설정합니다.
• inherit : 부모 요소의 속성값을 상속받습니다.