🧐상황

요소에 거리감을 줘서 원근법을 나타내주는 perspective 속성을 공부하면서 앞, 뒷면에 다른 이미지를 줘서 뒤집히는 카드를 만들 수 있다는 사실을 알았다..👀!
당장 조원영 저에요..ㅎㅎ 카드를 만들어야겠다는 생각이 들어서 만들어봄

---

🔎앞, 뒤 다른 카드 UI 만들기

• 구현하고 싶은 카드 UI
  1. 화면 로딩을 하면 중앙에서 휘리릭 뒤집히면서 점점 커짐
  2. 일정 크기에 도달하면 그 자리에서 둥둥 떠다님
  3. 마우스를 호버하면 움직임이 멈추고 카드의 크기가 커짐

💡 전체 코드

• HTML
  - <div class='front'>, <div class='back'>을 감싸는 <div> 2개를 만드는 이유는 나중에 animation 두 개를 줘야하기 때문

<div class="container">
  <div class="flip">
    <div class="front">앞면</div>
    <div class="back">뒷면</div>
  </div>
</div>

• CSS - 꾸며주는 속성은 편의상 제거

.container {
  width: 300px;
  height: 460px;

  animation-name: changeScale;
  animation-delay: 0;
  animation-duration: 2s;
  animation-iteration-count: 1;
}

.container:hover {
  transform: scale(1.1);
}

.flip {
  perspective: 1000px;
  width: 100%;
  height: 100%;
  position: relative;

  animation-name: changeTranslation;
  animation-delay: 2s;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.2, 0.15, 0.48, 1.02);
}

.flip:hover {
  animation-play-state: paused;
}

.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.front {
  animation-name: 휘리릭-front;
  animation-delay: 0;
  animation-duration: 2s;
  animation-iteration-count: 1;
}

.back {
  transform: rotateY(180deg);

  animation-name: 휘리릭-back;
  animation-delay: 0;
  animation-duration: 2s;
  animation-iteration-count: 1;
}

@keyframes changeScale {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes 휘리릭-front {
  100% {
    transform: rotateY(720deg);
  }
}

@keyframes 휘리릭-back {
  100% {
    transform: rotateY(900deg);
  }
}

@keyframes changeTranslation {
  35% {
    transform: translateY(-50px);
  }
  90% {
    transform: translateY(0px);
  }
}

💡1번 구현

• 1. 화면 로딩을 하면 중앙에서 휘리릭 뒤집히면서 점점 커짐

• .container에 changeScale animation 줌
  페이지 로드 되자마자 1번 실행
  2초동안 크기 0 -> 원래크기 로 키움

.container {
  animation-name: changeScale;
  animation-delay: 0;
  animation-duration: 2s;
  animation-iteration-count: 1;
}

@keyframes changeScale {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

• .front에 휘리릭-front animation 줌
  페이지 로드 되자마자 1번 실행
  2초동안 720deg 회전

.front {
  backface-visibility: hidden;

  animation-name: 휘리릭-front;
  animation-delay: 0;
  animation-duration: 2s;
  animation-iteration-count: 1;
}

@keyframes 휘리릭-front {
  100% {
    transform: rotateY(720deg);
  }
}

• .back은 초기값을 180deg 돌려 뒷면으로 배치
  휘리릭-back animation으로 똑같이 2초동안 720deg 회전
  즉, animation 끝날 때 180deg + 720deg = 900deg

.back {
  backface-visibility: hidden;
  transform: rotateY(180deg);
}

@keyframes 휘리릭-back {
  100% {
    transform: rotateY(900deg);
  }
}

backface-visibility

• 요소의 뒷면을 보여줄 지 여부를 결정
• 기본값 : visible
• 여기서 backface-visibility: hidden은 뒷면을 안보이게 설정

💡2번 구현

• 2. 일정 크기에 도달하면 그 자리에서 둥둥 떠다님

• .flip 에 둥둥 떠다니는 changeTranslation animation을 줌
  1번 효과가 다 끝난 뒤인 2초 지나서부터 시작
  멈추지 않고 계속 실행

• cf) perspective: 3d 효과 내면서 rotate

.flip {
  perspective: 1000px;

  animation-name: changeTranslation;
  animation-delay: 2s;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.2, 0.15, 0.48, 1.02);
}

@keyframes changeTranslation {
  35% {
    transform: translateY(-50px);
  }
  90% {
    transform: translateY(0px);
  }
}

💡3번 구현

• 3. 마우스를 호버하면 움직임이 멈추고 카드의 크기가 커짐
• 마우스 호버되면
  .flip의 둥둥떠다니는 animation 중지
  .container의 크기 키움

.container:hover {
  transform: scale(1.1);
}

.flip:hover {
  animation-play-state: paused;
}

💡구현 결과

---

🎈나만의 카드 만들기

• 위 코드를 적용해서 조원영 카드를 만들어보았다! 깃허브 링크😆
• 클릭하면 이력서로 가게 연결함
  

---

제 카드 획득하실 회사 구합니다~~ㅎㅎ✨