Day4 : 스타벅스 웹사이트 만들기 / 3D 애니메이션

 

HTML/CSS/JS로 스타벅스 웹사이트 만들기

 

개요

 

프로젝트명 : HTML/CSS/JS로 스타벅스 웹사이트 만들기

강의 : 패스트캠퍼스 프론트엔드

분류 : 클론코딩

주요 강의 내용

- html : basic html + font, favicon

- css : basic css, 가상 클래스, bem

- js : basic js, swiper(슬라이드), toggle, gsap.to(순차적 애니메이션), Youtube iframe APII 등

사용 툴 : HTML, CSS, JavaScript

 

패스트캠퍼스 강의를 정리한 내용으로, 개인공부 후 기록하기 위한 목적임으로 내용 상에 오류가 있을 수 있습니다.

 

---

DAY 4
: 3D 애니메이션

 

3D 애니메이션

* view

 

마우스를 올리면 뒤집어지면서 다른 이미지 혹은 뒷면이 나오도록 하는 3D 애니메이션 구현

---

* html code

    <!-- 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>

 

class name medal div tag 안에

앞면(front), 뒷면(back) div 태그 만들고, 그 안에 img 넣기

 

---

* css code 1

 /* 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;
 }

 

Day3 에서 했던 Parallax 구현하기
+ 이미지 가운데 정렬

 .reserve-store .medal {
    width: 334px;
    height: 334px; 
    perspective: 600px;
    /* 부모의 자식 요소가 3차원의 애니메이션 효과를 가질 때,
    600px의 거리에서 보는 원근감을 줌 */
 }

 .reserve-store .medal .front,
 .reserve-store .medal .back {
    position: absolute;
    /* 뒷면 카드가 아래에서 위로 올라감, 두 개 겹치게 만듬 */
    width: 334px;
    height: 334px;
    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);
}

 

기본적인 설명은 코드 안에 주석처리로 했다.

 

+ 추가 설명

뒤집어진 뒷면: transform: rotateY(-180deg);

(y축을 중심으로 -180도 회전)

 

마우스로 클릭해서 뒤집어지기 전에는 이 뒷면이 보이면 안됨. 뒷면 보이지 않게 처리

: backface-visibility: hidden;

 

마우스를 올렸을 때(hover) 각각 y축을 중심으로 앞면(front)는 180도 회전 (뒷면),

뒷면(back)은 0도로 회전해서 제자리로 돌아오면서

뒷면은 보이지 않도록 처리를 했기 때문에 (backface-visibility: hidden;)

앞면은 안보이고, 뒷면만 보이게 된다.

이 과정이 자연스럽게 보이기 위해서 전환효과(transition: 1s;) 를 추가하고,

입체감을 살리기 위해서 부모요소에 perspective: 600px; 을 추가한다.

perspective: 600px

 

이 부분이 이해가 잘 안되서 추가로 검색해보니,

의미가 600px 만큼 떨어진 곳(즉, z축을 따라 600px)에 관찰자가 있다는 것을 근거로 하여 3D 환경을 구성하게 되는 것이라고 한다. 즉, 원근감을 만드는 요소라고 한다 :)

 

출처 링크

3D 트랜스폼(Transforms)