시작 전 주의사항
이걸 보는 것 보다
https://3dtransforms.desandro.com/carousel
요길 들어가는게 더 정신건강에 이로울 수 있습니다.

3D Carousel만들기

홈페이지가 3D를 기반 베이스로 하다보니 캐러셀도 3d로 만들어보기로 함

사용한 것들

React {useRef, useEffect, useState }

Styled components

정도

방법

저 위 글의 요약본은 이거다.

카드를 회전시키고

버튼을 눌렀을 때(앞으로가기 or 뒤로가기)

그 카드를 닮고있는 컨테이너 회전시키는 것이다.

친절하게 trnaslate값과 각도값을 설명해주신다.

진행

카드 넓이 구하기

우선 ref를 활용하여 카드의 넓이를 구하자

translateZ 구하기

const value = Math.round(ref.current.offsetHeight / 2 / Math.tan(Math.PI / ProjectsData.length));

ref.current.offsetHeight / 2 === 삼각형 밑변
Math.tan(Math.PI / ProjectsData.length)); === 각도

각도 구하기

setRotateY(360 / ProjectsData.length);

총 카드 갯수로 나누기

컨테이너가 돌아가는 각도 구하기

let angleValue = (idx / ProjectsData.length) * -360;

idx는 버튼으로 ++ , -- 해줄 값

여기서 idx의 값을 계속 올려주고 내려줘도

360도 뒤 값은 다시 제자리기 때문에 상관이 없다

360 720은 같은 값

완성

컨테이너

        <InnerContainer angle={angle} transZ={tz}>
          {ProjectsData.map((el, key) => {
            return (
              <Card3D ref={ref} key={key} angle={`${rotateY}` * key} transZ={tz}>
                {key}
              </Card3D>
            );
          })}
        </InnerContainer>

css

const InnerContainer = styled.div`
  width: 100%;
  min-height: 80%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  transform-style: preserve-3d;
  transform: ${(props) => `rotateX(${props.angle}deg) translateZ(-${props.transZ }px)`};
  transition: transform 1s;
`;

const Card3D = styled.div`
  position: absolute;
  width: 80%;
  height: 80%;
  background-color: blue;
  transform: ${(props) => `rotateX(${props.angle}deg) translateZ(${props.transZ + 25}px)`};
`;
//props.transZ + 25 여기서 25 값은 카드끼리의 마진값같은 개념

버튼

  useEffect(() => {
    let angleValue = (idx / ProjectsData.length) * -360;
    setAngle(angleValue);
  }, [idx]);


       <ArrowLeft
          onClick={() => {
            setIdx((prev) => prev - 1);
          }}>
          ㅇ
        </ArrowLeft>
        <ArrowRight
          onClick={() => {
            setIdx((prev) => prev + 1);
          }}>
          ㅇ
        </ArrowRight>

완성