React 에서 3d Carousel만들기
시작 전 주의사항
이걸 보는 것 보다
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>
완성
Author And Source
이 문제에 관하여(React 에서 3d Carousel만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kbm940526/React-에서-3d-Carousel만들기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)