귀염뽀짝 카드 flip 애니메이션 효과 만들기 🌈🔮(HTML, CSS)

상황 설명

회사에서 서비스 설명하는 사이트가 있는데, 거기에서 카드가 뒤집히는 효과가 들어간 스타일이 있었다.
라이브러리를 써야 하나? 생각할 정도로 어렵고 복잡한 줄 알았는데 해보니까 생각보다 간단했다 ㅎㅎ

일단 구글에 검색을 하니까 w3School에서 flip card를 알려주는 페이지도 있었다! 예시 화면, html, css 코드가 있다. 나는 전체적으로는 이걸 참고했다.

 

카드 뒤집히는 효과 CSS , HTML 🌈

W3School의 코드를 조금 바꾸고, 설명을 달았다. ㅎㅎ

See the Pen Untitled by Seoin (@tjdls111) on CodePen.

 

 

 

 

HTML (봐야 할 부분만)

<div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <img src="https://picsum.photos/300" alt="Front image" style="width:300px;height:300px;">
      </div>
      <div class="flip-card-back">
        <div class="content">
          <p>뒤</p>
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum et consequatur voluptatibus soluta facilis, quaerat id necessitatibus optio laborum, accusamus harum ipsam similique repudiandae repellat! Officiis consequatur unde nesciunt quam!</p>
        </div>
     </div>
  </div>
</div>

 

CSS 코드

.flip-card {
  width: 300px; /* 카드 너비*/
  height: 300px; /* 카드 높이*/
  perspective: 1000px; /* 3D 효과(원근감)*/
}


.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s; /* 카드 뒤집히는 변화를 얼마 동안에 일어나게 할지 ! */
  transform-style: preserve-3d; /* 자식 요소들이 3D 공간에 있게 할건지 */
}

/* 카드에 마우스 호버 시, 앞면/뒷면을 감싼 flip-card-inner가 뒤집힘. (앞뒤면 같이 뒤집힘) */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}


.flip-card-front, .flip-card-back {
  position: absolute; /* 앞, 뒤면 같은 위치에 배치 */
  width: 100%;
  height: 100%;
  
  backface-visibility: hidden; /* 뒷면 안보이게 함 */
  -webkit-backface-visibility: hidden; /* Safari */
}

/* 카드 뒷면 스타일 */
.flip-card-back {
  background-color: yellow;
  color: black;
  transform: rotateY(180deg); /* 맨 처음에 뒷면이 뒤집어진 상태에서 시작하도록 */
}

 

flip-card-inner의 transition을 안 하면?

 

 

글자에 입체감 주기 🔮

여기에서 조금 더 예쁘게 하고 싶었다! 글자에도 입체감을 주는 것이다. 

See the Pen Flip Card With cute texts by Seoin (@tjdls111) on CodePen.

 

 

 

 

카드 뒷면 영역에 div 하나를 추가하고, 그 안에 p 태그들을 두었다. div에 content 클래스를 준 후에, transform: translateZ와 scale 효과를 주었다. 

translateZ는 요소를 z 축 기준으로 조정하는 것이다. 원래 위치보다 더 화면에 가깝거나 멀게 느껴지게 할 수 있다. 

 transform: translateZ(90px);

나는 글자들을 z 축으로 더 앞쪽으로 오게 해서, 노란 네모에 비해서 위에 붕 떠있는 효과를 줬다 ㅎㅎ

그런데 그렇게 하면, 글자가 원래보다 더 커 보인다. 

translateZ 효과 없을 때

scale 없이 translateZ 효과만 줬을 때

그래서 scale을 줄여줬다. 

 

🔔이때 주의할 점! (내가 헤맨 부분) 

flip-card-back css에 transform-style: preserve-3d; 를 해야 한다. 그래야 그 하위요소에도 3D 효과를 줄 수 있다!!

flip-card-back의 조상 요소인 flip-card-inner에도 transform-style: preserve-3d; 를 했는데, 또 따로 해야 한다. 궁금해서 찾아보니, mdn 문서에 그 답이 쓰여있었다. 'As this property is not inherited, it must be set for all non-leaf descendants of the element.' 즉 이 속성은 상속되지 않기 때문에, 이 속성을 해당 요소의 자식 요소들에게 주고 싶으면, 각각의 자식 요소에 이 속성을 지정해줘야 하는 것이다. 

스크롤하면 카드가 뒤집히게 하기 🌔

예~ 이제 완성이구나~ 하고 좋아했는데, 추가 요구사항이 생겼다. 바로바로.. 모바일을 고려한 것이다! 웹에서는 마우스 호버를 하면 뒤집히는데, 모바일에서는 터치를 해야 뒤집힌다. 근데 사용자가 터치를 하면 카드가 뒤집힌다는 걸 알기가 어려우니까, 스크롤하면 카드가 뒤집히는 효과를 주기로 한 것이다! 이것도 재미있다 :)

이건 다음 글에 이어서 쓸게요!