카드 회전2 [React/Next.js] 라이브러리 없이 구현하는 카드 회전 및 광택 효과 라이브러리를 사용하지 않고 카드 회전 및 광택 효과 구현 기술 스택을 어떻게 보여줄까 고민을 좀 했다. 기존 포트폴리오에서는 intersectionobserver 를 이용하여 화면에 해당 기술이 보이면 svg로 도넛 모양이 퍼센트로 차며 숙련도를 보여주고 옆에 텍스트를 배치했었는데... 나만 어렵게 구현했다고 만족하고 보는 재미가 없었다. 기술 아이콘이 없는 기술스택이라니... 아이콘 보는 맛이 찰져야 하는데... 그래서 고심하다가 카드형식으로 만들어 보았고, 시각적 재미를 위해서 포켓몬 카드의 홀로그램 회전 효과를 적용해보았다. 볼만하다 핵심 원리를 요약하자면, 마우스 위치에 따라 동적으로 css 설정: pc 뿐 아니라 다른 기기에도 사용할 수 있도록 포인트 이벤트를 사용하여 카드위에 위치한 마우스의 .. 2023. 12. 31. [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 다음
