CSS Transform 생성기
translate·rotate·scale·skew를 슬라이더로 움직이면 미리보기 박스가 즉시 변환됩니다. 3D 모드를 켜면 perspective와 rotateX·Y까지 한 번에 다룰 수 있습니다.
사용 방법
각 슬라이더를 움직이면 미리보기 박스가 즉시 변환됩니다. 각 변환마다 "리셋" 버튼이 있어 기본값으로 빠르게 되돌릴 수 있습니다.
회전·확대 축의 중심점을 X%·Y%로 조절. 50% 50%(중앙)이 기본이며, 좌상단(0% 0%)·우하단(100% 100%) 등 자유 변경.
"3D 모드"를 켜면 perspective(px)와 rotateX·rotateY·translateZ가 추가됩니다. 명함 뒤집기·카드 펼치기 같은 입체 효과에.
자주 묻는 질문
transform과 translate position 차이는?
transform: translate는 GPU 가속이 되어 부드럽고, position: absolute의 left/top은 매번 레이아웃 재계산이 필요합니다. 애니메이션은 transform이 훨씬 가볍습니다.
rotate의 단위는 deg, turn, rad 중 무엇이 좋을까요?
본 도구는 deg(도)로 출력합니다. 가장 직관적이고 호환성도 가장 좋습니다. turn(1turn = 360deg), rad(2π rad = 360deg)도 동일하게 동작.
scale을 음수로 두면?
음수 scale은 "뒤집기"입니다. scaleX(-1)은 좌우 반전, scaleY(-1)은 상하 반전입니다. 본 도구는 슬라이더 범위에서 음수도 허용합니다.
3D 변환이 안 보여요
3D 효과를 보려면 부모 요소에 perspective가 적용되어야 합니다. 본 도구는 perspective를 미리보기 "무대(stage)"에 직접 적용해 자식 박스에 입체감이 보이도록 처리되어 있습니다.
데이터가 서버에 전송되나요?
아닙니다. 모든 작업은 브라우저에서만 이루어지며, 만들어진 CSS는 외부로 전송되지 않습니다.
