이 CSS transform 생성기는 translate(), rotate(), rotateX(), rotateY(), skew(), scale(), perspective()를 하나의 transform 값으로 합치고, 직접 잡을 수 있는 샘플 상자에 바로 보여 줍니다. 상자를 끌면 이동, 위쪽 둥근 핸들을 끌면 회전(Shift를 누르면 15도 단위), 모서리의 네모 핸들을 끌면 변형 기준점을 중심으로 크기가 바뀝니다. 미리보기 옆 입력란에도 같은 값이 있어서 직접 입력하거나 좌우로 끌어 조절하고 방향키로 미세 조정할 수 있습니다.
점선 윤곽은 상자가 처음 있던 자리, 빨간 핀은 3 x 3 격자에서 고르는 변형 기준점입니다. 회전의 축이 눈에 보이므로 기준점을 왼쪽 아래 모서리로 바꾸면 상자가 문짝처럼 경첩을 축으로 돌아갑니다. 출력 순서는 항상 perspective, translate, rotate, rotateX, rotateY, skew, scale로 고정입니다. 변환은 교환 법칙이 성립하지 않아 순서가 결과를 바꾸기 때문입니다.
아무 일도 하지 않는 함수는 빼고 출력하므로 단순한 기울임은 rotate(15deg)로, 아무것도 바뀌지 않은 상자는 none으로 나옵니다. 애니메이션 키프레임용으로 긴 형태가 필요하면 모든 함수 출력을 켜세요. 퍼센트 단위는 만들지 않습니다. 입력한 내용은 브라우저 안에서 처리되며 서버로 전송되지 않습니다.
사용 방법
예제나 기본 기울어진 카드에서 시작
예제는 완성된 transform 하나를 불러옵니다. 기울임, 3D 카드, 이탤릭 기울이기, 떠오름, 90° 회전이 있으며 기준점은 모두 가운데로 돌아갑니다.
무대 위에서 이동·회전·크기 조절
상자를 끌면 사방으로 최대 500px까지 이동합니다. 위쪽 핸들은 -360~360도 회전이며 Shift를 누르면 15도 단위로 붙습니다. 모서리 핸들은 0.1~3배 크기 조절입니다. 어느 핸들이든 초점을 두고 방향키로 미세 조정할 수 있습니다.
입력란으로 다듬기
가로·세로 이동은 픽셀, 회전은 도, 크기는 균일한 배율 하나, 기울이기는 가로·세로 -60~60도로 입력하거나 끌어서 조절합니다. 무대는 입력할 때마다 바로 따라옵니다.
깊이와 기준점 정하기
X축 회전과 Y축 회전은 상자를 3D로 기울이고, 원근(0은 끔, 켤 때는 100~2000px)은 원근감의 세기를 정합니다. 아홉 개의 기준점 중 하나를 골라 회전·크기·기울이기의 축을 바꿀 수 있습니다.
transform 복사
버튼이나 Ctrl/Cmd+Enter로
transform: ...;줄을 복사합니다. 기준점이 가운데가 아니면transform-origin줄도 함께 나옵니다.
작동 원리
함수 순서가 결과를 바꾼다
W3C의 CSS Transforms Module Level 1은 목록의 함수를 왼쪽에서 오른쪽으로 곱해 하나의 행렬로 만듭니다. 실제로는 각 함수가 자기보다 왼쪽에 있는 함수들이 이미 바꿔 놓은 좌표계에서 동작한다고 읽으면 됩니다. translate(100px, 0) rotate(45deg)는 상자를 오른쪽으로 100px 옮긴 다음 제자리에서 돌리지만, rotate(45deg) translate(100px, 0)는 좌표계를 먼저 돌린 뒤 돌아간 x축을 따라 100px 움직이므로 대각선 아래쪽으로 갑니다.
생성기는 perspective, translate, rotate, rotateX, rotateY, skew, scale 순서로 씁니다. 깊이, 위치, 방향, 왜곡, 크기 순이어서 일반적인 UI 작업에서 가장 예측하기 쉬운 순서입니다. translate가 앞쪽에 있으므로 이동량은 페이지 자체의 축으로 측정되어 회전에 기울지 않고 크기에 커지지도 않습니다. 상자를 끌면 포인터와 정확히 같이 움직이는 것도 이 덕분입니다.
| 함수 | 여기서의 단위 | 허용 범위 | 효과 |
|---|---|---|---|
| perspective(d) | px | 0(끔), 100~2000 | 뒤따르는 3D 회전에 깊이를 부여 |
| translate(x, y) | px | 각각 -500~500 | 이웃 요소를 밀지 않고 상자를 이동 |
| rotate(a) | deg | -360~360 | 양수는 시계 방향 |
| rotateX(a), rotateY(a) | deg | -180~180 | 가로축 또는 세로축을 중심으로 상자를 눕힘 |
| skew(ax, ay) | deg | 각각 -60~60 | x와 y 방향으로 기울임 |
| scale(s) | 없음 | 0.1~3 | 균일한 크기 변경 |
변형 기준점과 레이아웃
기본 기준점은 요소의 가운데(transform-origin: 50% 50%)라서 회전과 크기 변경이 중앙을 축으로 일어납니다. 기준점 격자에서 다른 점을 고르면 top left, bottom 같은 키워드로 transform-origin 줄이 추가되고, 무대의 빨간 핀이 축의 위치를 보여 줍니다. 기준점 top left에 rotate(-8deg)를 주면 문짝이 열리는 모습이 됩니다.
변환은 요소가 그려지고 클릭되는 방식만 바꿀 뿐 레이아웃 상자는 바꾸지 않습니다. 오른쪽으로 200px 옮긴 상자도 원래 자리를 그대로 차지하고, 3배로 키운 상자는 이웃과 겹칠 수 있습니다. 또 변환된 요소는 자체 쌓임 맥락이 되고 position: fixed 자손의 기준 상자가 되므로, 고정 위치 자식이 뷰포트에 붙을 줄 알았던 사람은 당황하게 됩니다.
원근과 3D 회전
rotateX()와 rotateY()는 상자를 페이지 평면 밖으로 돌리지만 perspective가 없으면 그저 납작하고 좁아진 상자일 뿐입니다. perspective(700px)는 보는 사람을 평면에서 700px 떨어뜨려 가까운 쪽은 커지고 먼 쪽은 작아지게 합니다. 값이 작을수록 효과가 과장되고 클수록 평평해집니다. 함수로 쓰면 목록의 맨 앞에 놓여 뒤따르는 모든 함수에 적용되고, 부모에 perspective 속성을 주면 자식들이 소실점 하나를 공유합니다.
정사각형을 평면에서 45도 돌리면 마름모가 되고 축에 평행한 경계 상자는 변 x 루트 2로 커집니다. 100px 정사각형에 rotate(45deg)를 주면 가로세로 약 141.4px를 차지하지만 레이아웃은 여전히 100px만 확보하므로 회전한 요소가 이웃을 침범할 수 있습니다.
실제 예시
이동 12, -8, 회전 15, 크기 1.2, 기울이기 4, -2transform: translate(12px, -8px) rotate(15deg) skew(4deg, -2deg) scale(1.2);모두 기본값, 기준점 가운데transform: none;아무 일도 하지 않는 함수는 생략되므로 변화가 없는 상자는 none으로 나옵니다.
모두 기본값, 모든 함수 출력 켬transform: translate(0px, 0px) rotate(0deg) rotateX(0deg) rotateY(0deg) skew(0deg, 0deg) scale(1);상태 사이를 애니메이션하는 키프레임은 양쪽에 같은 함수가 있을 때 보간이 더 예측하기 쉽습니다.
회전 -8, 기준점 왼쪽 아래transform: rotate(-8deg);
transform-origin: bottom left;이동 0, -4, 크기 1.05transform: translate(0px, -4px) scale(1.05);카드를 4px 올리고 5% 키웁니다. transition: transform 200ms와 함께 쓰세요.
원근 700, X축 회전 20, Y축 회전 -25transform: perspective(700px) rotateX(20deg) rotateY(-25deg);자주 하는 실수
순서는 상관없다고 생각함
함수를 다른 순서로 직접 붙여 넣으면 상자가 다른 곳에 놓입니다.
rotate(30deg) translate(100px, 0)와translate(100px, 0) rotate(30deg)는 서로 바꿔 쓸 수 없습니다.기울이기가 회전의 모양을 바꿈
회전 뒤에 적용된 기울이기는 회전한 모양을 단순히 눕히는 대신 왜곡합니다. 그냥 기울이려는 것이라면 두 기울이기 값을 0으로 두세요.
원근 없는 3D 회전
rotateY(40deg)만 쓰면 상자가 가로로 좁아질 뿐입니다. 깊이감을 얻으려면 보통 500~1200px의 원근 값을 더하세요.인라인 요소에 변환
<span>이나<a>같은 순수 인라인 요소는 변환을 무시합니다. 먼저display: inline-block이나 flex·grid 아이템으로 만드세요.크기 변경·소수 이동 뒤의 흐릿한 글자
소수 단위의 이동과 회전은 글자를 다시 샘플링하게 해서 흐릿해 보일 수 있습니다. 선명한 글자를 원하면 이동은 정수 픽셀로 하고 글자 자체의 크기 변경은 피하세요.
변환이 fixed 자식을 망가뜨림
변환된 조상 안의
position: fixed자식은 뷰포트가 아니라 그 조상을 기준으로 배치됩니다. 뷰포트에 고정해야 한다면 자식을 변환된 요소 밖으로 꺼내세요.
자주 묻는 질문
transform 함수는 어떤 순서로 적용되나요?
목록을 왼쪽에서 오른쪽으로 행렬로 곱하므로 각 함수는 앞선 함수들이 만든 좌표계에서 동작합니다. 눈에 보이는 순서로는 가장 오른쪽 함수가 요소에 먼저 작용합니다. 이 도구는 항상 perspective, translate, rotate, rotateX, rotateY, skew, scale 순으로 쓰고 아무 일도 하지 않는 함수는 뺍니다.
rotate의 양수는 어느 방향인가요?
시계 방향입니다. rotate(90deg)는 위를 향한 화살표를 오른쪽으로, -90deg는 왼쪽으로 돌립니다.
transform: scale과 width·height 변경은 무엇이 다른가요?
scale은 글자와 테두리를 포함해 요소가 그려지는 크기만 바꾸고 레이아웃은 그대로 둡니다. width와 height를 바꾸면 페이지가 다시 배치되지만 글자 크기는 그대로입니다.
가운데가 아니라 모서리를 축으로 돌리려면 어떻게 하나요?
기준점 격자에서 그 모서리를 고르세요. 생성기가 transform 줄 아래에 transform-origin: top left 같은 줄을 추가하고, 무대의 빨간 핀이 축의 위치를 보여 줍니다.
transform은 레이아웃을 유발하거나 성능을 해치나요?
transform을 바꾸는 것은 보통 레이아웃과 페인트를 건너뛰고 컴포지터에서 처리되므로 top이나 left를 애니메이션하는 것보다 낫습니다. 다만 강한 블러나 아주 큰 요소는 여전히 프레임 시간을 쓸 수 있습니다.
기울인 요소가 왜 늘어나 보이나요?
기울이기는 도형을 한 축 방향으로 밀어 비트는 것이라 60도에 가까운 큰 각도에서는 길고 뾰족한 모서리가 생깁니다. 은은하게 기울이려면 보통 15도 이하로 쓰세요.
3D 효과는 어떻게 얻나요?
X축 회전이나 Y축 회전과 700 같은 원근 값을 설정하세요. 출력은 perspective(700px)로 시작해 회전이 뒤따릅니다. 여러 형제 요소가 소실점을 공유해야 한다면 부모에 perspective 속성을 주세요.
입력한 값이 서버로 올라가나요?
아니요. 값은 브라우저 안에서 처리되며 서버로 전송되지 않습니다.
마지막 업데이트: