[CSS] 카드 Flip 효과 만들기 (transition, transform, grid)

완성본!

 

반복을 활용하여 위와같이 메뉴와 설명을 출력하는 과제를 진행하고 있다.

화면을 구성한 후에 마우스를 올렸을 때 카드가 돌아가면 재밌을 것 같아 방법을 찾아보았다!

 

 

간단 요약

1) 카드의 앞면, 뒷면을 담당할 요소를 각각 만들어준다.

2) rotateY로 Y축 기준 회전시켜주고, 요소가 화면에 뒷면을 보일 때는 보이지 않도록 설정한다. (hidden)

3) (상황에따라 선택) 레이아웃이나 포지션을 활용해 앞면/뒷면 요소들이 같은 위치에 위치하도록 한다.

 

회전시키는 메서드 등은 있을 것 같았는데 앞뒷면을 별도의 요소로 제작 -> 둘을 같은 위치에 놓고 -> 회전시키면서 요소가 뒷면일 때는 보이지 않게한다는 건 떠올리지 못했다!

너무 직관적으로 돌리는 것만 생각하지 말고 간접적으로 적절히 연출하는 것도 필요하다는 생각이 들었다.

 

 

적용 방법

1) 카드의 앞면, 뒷면을 담당할 요소 만들기

<li class="menuItem">
    <h2 class="menuName">${menu.name}</h2>
    <div class="menuDescription">${menu.description}</div>
</li>

 

앞면 요소와 뒷면 요소를 묶어줄 상위 태그가 필요하다.

나는 지금 만들고있는게 메뉴 카드의 나열이라 ul 안의 li 태그로 감싸져있는데, div 등 다른 태그여도 관계없다!

회전효과를 적용해줄 상위 태그가 있으면 된다.

 

.menuDescription {
    transform: rotateY(180deg);
}

 

뒷면 요소는 rotateY를 통해 180도 회전시켜둔다!

 

 

 

2-1) Y축 기준 회전시키기

이제 둘을 감싸고있는 상위태그를 돌려주는 효과를 추가한다.

.menuItem {
  transition: transform 0.5s;
  transform: perspective(800px) rotateY(0deg);
  transform-style: preserve-3d;
}

.menuItem:hover {
    transform: perspective(800px) rotateY(180deg);
}

 

메뉴 카드의 기본 Y축 회전값을 0도로 두고, hover 상태가 되었을 때 180도로 바꿔준다.

변화하는 시간을 0.5s 로 주었는데, 속도를 조정하고싶다면 이 부분을 수정하면 된다.

(ex. 10초에 걸쳐 회전시키고 싶다면 10s)

 

 

 

2-2) 요소가 뒷면인 상태일 때는 보이지 않게 하기

.menuItem > * {
    backface-visibility: hidden;
}

 

거의 다왔다~~

지금 상태에서는 앞면 요소, 뒷면 요소가 각자의 영역을 차지하고있어서 서로 다른 곳에서 글자가 나타난다.

나는 두 요소가 같은 위치에서 보여지길 원하기 때문에 gird를 활용해 같은 곳에 위치하도록 설정했다.

 

 

3) 앞/뒷면 요소가 같은 곳에 위치하도록 하기

.menuItem {
  transition: transform 0.5s;
  transform: perspective(800px) rotateY(0deg);
  transform-style: preserve-3d;

  display: grid;
}

.menuItem > * {
    grid-area: 1 / 1 / 1 / 1;
    backface-visibility: hidden;
}

 

앞/뒷면을 묶어둔 상위태그의 display를 grid로 설정하고, 하위태그들의 영역을 동일하게 지정해주었다.

 

 

두 요소가 같은 곳에 위치해있음을 확인할 수 있다!

 

 

 

참고자료

solo5star, 2023.04.29, CSS로 카드뒤집는 3D 애니메이션 만들기