🔃 CSS transform 코드 생성기

translateX (가로 이동)

translateY (세로 이동)

rotate (회전 각도)

deg

scaleX (가로 배율 · 1 이 원래 크기)

scaleY (세로 배율 · 1 이 원래 크기)

skewX (가로 기울임)

deg

skewY (세로 기울임)

deg

transform-origin (변형 기준점)

transform 함수를 한 줄로 조합하기

이동·회전·배율·기울임은 모두 transform 한 줄에 함수로 들어갑니다. 기본값인 항목은 선언에서 빼야 코드가 짧아지는데, 손으로 쓰면 scale(1, 1) 같은 쓸모 없는 함수가 남기 쉽습니다. 여기서는 기본값 항목을 자동으로 빼고, 남은 함수만 순서대로 이어 붙입니다.

순서와 기준점

transform 의 함수는 적는 순서대로 적용되므로 translate 뒤의 rotate 와 rotate 뒤의 translate 는 결과가 다릅니다. 회전·배율의 중심은 transform-origin 이 정하고 기본값은 center 라서, center 를 고르면 선언을 넣지 않습니다. 함수 이름과 인자 표기는 W3C 의 CSS Transforms 명세를 따릅니다(2026년 10월 기준).

하지 않는 것

전환 시간·이징은 만들지 않습니다. 같은 변형을 서서히 적용하려면 transition 쪽 도구가 맞습니다. rotate3d·perspective 같은 3D 함수와 matrix 축약형도 다루지 않으며, 배율 0 과 기울임 90도는 요소가 사라지는 값이라 입력에서 막습니다.

자주 묻는 질문

함수 순서를 바꾸면 결과가 달라지나요?

달라집니다. translate 뒤의 rotate 는 이동한 위치를 중심으로 돌고, rotate 뒤의 translate 는 회전한 좌표축 방향으로 움직입니다.

배율에 0 을 넣으면 어떻게 되나요?

폭과 높이가 0 이 되어 요소가 완전히 사라집니다. 좌우를 뒤집고 싶다면 0 이 아니라 -1 을 넣으세요.

transform 을 쓰면 주변 요소가 밀리나요?

밀리지 않습니다. transform 은 레이아웃 공간을 그대로 두고 그려지는 위치만 바꾸므로, 겹쳐 보일 수 있습니다.

🔃CSS transform 회전·크기 코드 생성기

관련된 도구

CSS transition 코드 생성기

CSS 키프레임 애니메이션 코드 생성기

transform 함수를 한 줄로 조합하기

순서와 기준점

하지 않는 것

자주 묻는 질문

관련된 도구

CSS transition 코드 생성기

CSS 키프레임 애니메이션 코드 생성기

transform 함수를 한 줄로 조합하기

순서와 기준점

하지 않는 것

자주 묻는 질문

같은 카테고리 도구