CSS 트랜스폼 생성기
translateX/Y·rotate·scale·skewX/Y를 하나의 CSS transform 값으로 조합하고, 기본값(항등값)에 둔 함수는 출력에서 뺍니다.
CSS 트랜스폼 생성기
실시간 미리보기
결과
transform: none;transform: none;
transform 함수마다 슬라이더, 값은 하나
슬라이더를 움직여 미리보기 박스를 이동·회전·확대·기울이면 그 결과인 transform 값이 실시간으로 갱신됩니다. 원하는 모습이 되면 transform: …; 선언 전체를 복사하거나 값만 따로 복사할 수 있습니다. 각 슬라이더는 하나의 CSS transform 함수에 대응합니다. translateX와 translateY는 픽셀 단위로 요소를 이동하고, rotate는 도 단위로 회전하며, scale은 크기를 키우거나 줄이고, skewX는 가로 방향으로, skewY는 세로 방향으로 기울입니다. 미리보기에 복사되는 값이 그대로 쓰이므로, 보이는 모습이 스타일시트에서도 그대로 나옵니다. ‘정육면체로 미리보기 (3D 회전 확인용)’를 체크하면 샘플 카드 대신 면마다 이름이 붙은 반투명 정육면체에 같은 값이 적용되어, 평평한 카드로는 옆선만 보이던 rotateX와 rotateY가 회전으로 보입니다.
기본값(항등값)을 생략하는 이유
translateX(0px), rotate(0deg), scale(1), skewX(0deg)처럼 아무 효과가 없는 함수는 CSS를 지저분하게 만들 뿐이므로 자동으로 제외합니다. 생성기는 중립 위치에서 벗어난 슬라이더만 골라 perspective, translateX, translateY, translateZ, rotateX, rotateY, rotate, scale, scaleX, scaleY, skewX, skewY의 고정된 순서로 값을 조합하여 출력이 항상 일정하고 예측 가능합니다. 모든 슬라이더가 항등값에 있으면 결과는 그냥 none이 되며, 이는 어디에나 붙여 넣을 수 있는 유효한 transform 값입니다. 순서도 중요합니다. transform은 오른쪽에서 왼쪽으로 적용되므로 같은 함수라도 순서가 다르면 결과가 달라질 수 있습니다.
자주 묻는 질문
왜 transform 값에서 일부 함수가 빠지나요?
중립값에 있는 함수는 시각적 효과가 없어 생략됩니다. translateX·translateY가 0, rotate·skewX·skewY가 0도, scale이 1이면 요소가 그대로이므로 출력을 깔끔하게 유지하기 위해 제외합니다. 슬라이더를 기본값에서 벗어나게 움직이면 해당 함수가 값에 나타납니다.
transform 순서가 결과에 영향을 주나요?
네. CSS는 transform 함수를 오른쪽에서 왼쪽으로 적용하므로 회전 후 이동과 이동 후 회전은 결과가 다릅니다. 이 도구는 항상 perspective, translateX, translateY, translateZ, rotateX, rotateY, rotate, scale, scaleX, scaleY, skewX, skewY 순서로 출력하여 같은 슬라이더 위치에 대해 일관되고 재현 가능한 결과를 냅니다.
3D 변형이나 슬라이더 범위를 넘는 값도 되나요?
네. perspective, translateZ, rotateX, rotateY 슬라이더와 축마다 따로 늘이는 슬라이더가 있고, 모든 조절기 옆에 숫자 칸이 있어 슬라이더 범위를 넘거나 더 잘게 나눈 값을 직접 넣을 수 있습니다.
값을 더 짧게 쓰거나, 내 사진에 적용해 보거나, 조절기 하나만 되돌릴 수 있나요?
네. ‘짧게 쓰기 — translate(x, y), translate3d(), scale(x, y)’를 체크하면 이동 함수들이 translate() 하나로(translateZ를 움직이면 translate3d()로), scaleX와 scaleY가 scale(x, y) 하나로 합쳐집니다. skewX와 skewY는 합치지 않습니다 — skew(x, y)는 다른 모양으로 기울이기 때문입니다. ‘내 이미지로 보기…’를 누르면 샘플 카드 대신 기기의 사진에 같은 값이 적용되며, 사진은 링크에 담기지 않습니다. 조절기마다 옆에 ↺ 버튼이 있어 그 항목 하나만 기본값으로 되돌리고 나머지는 그대로 둡니다.
평평한 카드 말고 3D 회전을 제대로 볼 수 있나요?
네. 이미지 버튼 옆의 ‘정육면체로 미리보기 (3D 회전 확인용)’를 체크하면 샘플 카드가 면마다 이름(앞·뒤·오른쪽·왼쪽·위·아래)이 붙은 반투명 정육면체로 바뀌고, transform-style: preserve-3d로 입체를 유지한 채 복사하는 값과 같은 값으로 회전합니다. 평평한 카드로는 가는 선으로만 보이던 rotateX나 rotateY가 정육면체의 옆면으로 보이고, 뒤쪽 면도 비쳐 보입니다. 정육면체는 보기용일 뿐이라 CSS는 어느 쪽이든 같습니다.