3d carousel1 [React/Next.js] 라이브러리 없이 구현하는 3D carousel 라이브러리를 사용하지 않고 3D carousel 구현 carousel 은 라이브러리로 구현하면 사용하기 편리하지만, 이 구현을 한 포트폴리오 프로젝트는 최소한의 라이브러리를 사용해서 직접 구현하고자 정했기에, next.js와 css와 html 만으로 구현하였다. 2d 형식의 슬라이드는 너무 못생겼고 간단했기에, 3d로 구현해보았다. 핵심 원리를 요약하자면, Transform 속성 활용: 각 캐러셀 아이템에 transform CSS 속성을 사용하여 3D 회전(rotateY)과 깊이(translateZ)를 조정해 입체적인 효과를 구현 조건부 렌더링과 인덱스 관리: active 상태 변수를 사용하여 현재 활성화된 캐러셀 아이템을 추적하고, 이를 바탕으로 각 아이템의 위치와 스타일을 동적으로 변경 사용자 상호작.. 2023. 12. 31. 이전 1 다음
