CSS 3D 변환 생성기
슬라이더로 3D 카드·큐브를 만들고 CSS 코드를 바로 복사
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
회전(X/Y/Z), 원근감, 이동, 크기 슬라이더를 움직이며 3D 카드와 큐브 효과를 실시간 미리보기로 확인할 수 있는 도구입니다. 웹 퍼블리셔나 프론트엔드 개발자가 카드 호버 효과, 입체 큐브 애니메이션 등을 만들 때 값을 감으로 찾는 대신 눈으로 바로 확인하며 조정할 수 있습니다. 모든 계산과 미리보기는 브라우저 안에서만 처리되어 서버로 전송되는 데이터가 없습니다.
사용 방법
- 3D 카드 또는 3D 큐브 모드를 선택합니다.
- Rotate X/Y/Z, 원근법, Translate Z, 비율 슬라이더를 조절하며 미리보기 변화를 확인합니다.
- 원하는 형태가 나오면 하단의 생성된 CSS 코드를 복사 버튼으로 가져갑니다.
- 값이 뒤엉키면 초기화 버튼으로 기본값으로 되돌릴 수 있습니다.
자주 묻는 질문
- perspective 값은 왜 중요한가요?
- perspective가 지정되어야 회전할 때 입체감(원근 왜곡)이 생깁니다. 값이 작을수록 왜곡이 강해지고, 클수록 평면에 가까워집니다.
- 생성된 CSS를 그대로 써도 되나요?
- 네, 복사한 CSS는 transform, transform-style, transition 속성이 포함되어 있어 클래스만 맞추면 바로 적용됩니다.