Card1 [React/Next.js] 클릭 또는 몇 초 후에 카드 뒤집기 효과 (card flip) 몇 초 후에 자동으로 카드를 뒤집고 클릭시에도 카드를 뒤집는 효과이다 보통 이렇게 카드를 뒤집는 것을 card flip 이라고 하고, 검색으로 쉽게 구현이 가능한 효과다. 많은 사람들이 over 시 뒤집히도록 css로 hover 시 변화하도록 많이 구현하지만, 나는 hover가 아니라 클릭 시 뒤집히길 바라고, 클릭하지 않아도 몇 초 후에 자동으로 뒤집히게 구현해보고 싶었다. 핵심 원리를 요약하자면, CSS transition과 transform-style: preserve-3d;을 사용하여 카드 요소의 3D 회전 효과를 구현 React의 useState와 useEffect로 카드의 뒤집힘 상태(isFlipped)를 관리하고, 시간 간격이나 클릭 이벤트에 따라 상태를 변경 isFlipped 상태에 따라 .. 2023. 12. 31. 이전 1 다음
