CSS 3D transform을 슬라이더로 조작. 호버 효과·카드 플립·3D 갤러리에 필수.
🧊 미리보기 드래그해서 보이는 각도 변경
CSS 코드
CSS 3D Transform 사용법
- 모양(카드·큐브·이미지) 선택.
- perspective·rotate·translate·scale 슬라이더로 3D 변형.
- 실시간 미리보기로 확인.
- CSS 복사해서 본인 프로젝트에 적용.
- 리셋·랜덤 버튼으로 다양한 실험.
주요 기능
- perspective + rotate3d + translate3d + scale3d 통합
- 3가지 모양 (카드·큐브·이미지)
- 3D 큐브 (6면) 자동 생성
- 리셋·랜덤 셔플
- CSS 코드 즉시 복사
활용 예시
- 카드 플립 애니메이션 — 호버 시 뒷면 보이기
- 이미지 갤러리 회전 — 3D 캐러셀
- 3D 큐브 메뉴 — 6면 메뉴 UI
- 제품 360° 회전 — e-commerce 인터랙션
- 로딩 애니메이션 — 회전하는 로딩 인디케이터
CSS 3D Transform 핵심 개념
perspective는 시점과 화면 사이의 거리로, 작을수록 왜곡이 큽니다. rotate3d는 X·Y·Z 축 회전, translate3d는 3차원 이동, scale3d는 축별 크기 조정입니다. 부모에 perspective를 주고 자식에 transform을 적용하는 게 일반적입니다. transform-style: preserve-3d를 자식에도 주면 자식의 자식까지 3D로 렌더링됩니다. 큐브 6면 같은 복잡한 3D는 각 면을 절대 위치로 배치 후 회전·이동시킵니다.
자주 묻는 질문
css-transform과 어떻게 달라요?
css-transform은 2D + 기본 3D 변환, 본 도구는 3D 특화(perspective + 큐브 6면 미리보기)입니다.
모바일에서 3D가 깨져요.
모바일 사파리는 일부 3D 렌더링이 제한적입니다. -webkit-transform-style 접두사를 추가하세요.
큐브 6면 어떻게 만드나요?
각 면을 position:absolute로 같은 위치에 두고 각자 다른 rotate + translateZ로 6면 위치를 잡습니다.
무료?
네, 완전 무료입니다.