패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지. rotateY 변환함수를 이용하여 3D 애니메이션을 구현해보았다.

🎶 rotateY의 개념

• Y축을 기준으로 회전되는 변환함수
• 문법 : transform : rotateY(xdeg);
• 단위 : deg
  

HTML

• reserve-store라는 클래스명의 섹션을 작성해주었다
• 그 안에 요소의 가운데 정렬을 위한 클래스명 inner인 div 요소 작성해주었다
• 그 안에 클래스명 medal인 div 요소 작성해주었다
• medal의 자식 요소로 클래스명 front와 back인 div요소를 각각 작성해준 후, 각 요소 안에 이미지 하나씩을 연결해주었다
• 클래스명 back 안에 btn도 a 링크로 연결해주고, 스타일은 CSS로 제어해주었다

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

CSS

• .reserve-store 배경에 대해서는 앞서 pick-your-favorite 섹션에서 작성했던 것과 동일한 방식으로 스크롤바를 내릴 때 이미지는 고정되고, 이미지 사이즈는 뷰포트에 맞춰서 출력되도록 선언하였다

• .reserve-store .medal

  1. width: 334px, height: 334px > medal의 가로,세로 너비를 front, back의 가로,세로 너비와 일치시킴
  2. perspective: 600px > 요소가 전환될 때 원근감을 주기위해 전환효과가 일어날 때 600px 떨어진 지점에서 바라보는 효과를 주었다

• .reserve-store .medal .front, .reserve-store .medal .back{

  1. 다중선택자 방식을 사용해 작성하였다
  2. position: absolute > 두 요소의 배치 질서가 흩어지도록 하였다
  3. backface-visibility: hidden; > 뒷면은 안 보이도록 작성하였다
  4. transition: 1s; > 전환효과가 자연스럽게 일어나도록 1초간 일어나게 작성하였다

• .reserve-store .medal .front

  1. transform : rotateY(0deg); > 명시적으로 0도에서 시작하겠다고 작성하였다

• .reserve-store .medal:hover .front

  1. transform: rotateY(180deg); > mdedal이라는 요소에 마우스를 올리면 front가 Y축으로 180도 전환된다.
  2. 그런데 앞서 .reserve-store .medal .front에서 backface-visibility: hidden;로 제어했기 때문에 medal에 마우스를 올리면 front요소는 안 보이게 된다

• .reserve-store .medal .back

  1. transform : rotateY(-180deg); > 요소가 Y축을 기준으로 -180만큼 회전함(뒤집어짐)

• .reserve-store .medal:hover .back {

  1. mdedal이라는 요소에 마우스를 올리면 front가 Y축으로 0도로 전환된다. 원래 안 보였던 것이 보이게 됨

• .reserve-store .medal:hover .back .btn{

  1. 버튼도 medal 요소 안에서 함께 전환될 수 있도록 medal:hover를 통해 제어해줌

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

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