CSS 트랜스폼 생성기
이동·회전·크기·기울임 슬라이더로 CSS transform을 만들고 실시간 미리보기와 복사 가능한 코드를 제공합니다 — 100% 브라우저에서 실행되며 업로드되지 않습니다.
CSS 트랜스폼 생성기
실시간 미리보기
결과
transform: none;
🔒 브라우저에서 처리되며 업로드되지 않습니다.
이 도구가 하는 일
슬라이더를 움직여 미리보기 박스를 이동·회전·확대·기울이면 그 결과인 transform 값이 실시간으로 갱신됩니다. 원하는 모습이 되면 transform: …; 선언 전체를 복사하거나 값만 따로 복사할 수 있습니다. 각 슬라이더는 하나의 CSS transform 함수에 대응합니다. translateX와 translateY는 픽셀 단위로 요소를 이동하고, rotate는 도 단위로 회전하며, scale은 크기를 키우거나 줄이고, skewX는 가로 방향으로 기울입니다. 미리보기가 복사되는 값과 정확히 동일하게 표시되므로 보이는 그대로 스타일시트에 적용됩니다.
기본값(항등값)을 생략하는 이유
translateX(0px), rotate(0deg), scale(1), skewX(0deg)처럼 아무 효과가 없는 함수는 CSS를 지저분하게 만들 뿐이므로 자동으로 제외합니다. 생성기는 중립 위치에서 벗어난 슬라이더만 골라 translateX, translateY, rotate, scale, skewX의 고정된 순서로 값을 조합하여 출력이 항상 일정하고 예측 가능합니다. 모든 슬라이더가 항등값에 있으면 결과는 그냥 none이 되며, 이는 어디에나 붙여 넣을 수 있는 유효한 transform 값입니다. 순서도 중요합니다. transform은 오른쪽에서 왼쪽으로 적용되므로 같은 함수라도 순서가 다르면 결과가 달라질 수 있습니다.
자주 묻는 질문
왜 transform 값에서 일부 함수가 빠지나요?
중립값에 있는 함수는 시각적 효과가 없어 생략됩니다. translateX·translateY가 0, rotate·skewX가 0도, scale이 1이면 요소가 그대로이므로 출력을 깔끔하게 유지하기 위해 제외합니다. 슬라이더를 기본값에서 벗어나게 움직이면 해당 함수가 값에 나타납니다.
transform 순서가 결과에 영향을 주나요?
네. CSS는 transform 함수를 오른쪽에서 왼쪽으로 적용하므로 회전 후 이동과 이동 후 회전은 결과가 다릅니다. 이 도구는 항상 translateX, translateY, rotate, scale, skewX 순서로 출력하여 같은 슬라이더 위치에 대해 일관되고 재현 가능한 결과를 냅니다.
입력한 내용이 서버로 전송되나요?
아니요. 모든 슬라이더 값과 생성된 CSS는 기기를 벗어나지 않습니다. 미리보기와 transform 문자열은 모두 브라우저 안에서 자바스크립트로 계산되며 업로드·기록·저장되지 않습니다.