Translate moves the element without changing the document flow.
로컬 CSS transform 생성기
실시간 미리보기로 CSS transform을 조합하세요
이동·회전·확대·기울기 값을 조정하고 결과를 즉시 확인한 뒤 transform CSS를 복사하세요.
* 모든 처리는 브라우저에서 진행됩니다. transform 데이터는 업로드되지 않습니다.
CSS 준비 완료
transform: translate(12px, -8px) rotate(15deg) skew(4deg, -2deg) scale(1.2);TransformBox
QUICK GUIDE
transform 순서를 기억하세요
Rotate turns the element around its transform origin.
Scale changes visual size while the original layout box remains in place.
Skew slants the shape; combine it carefully with rotation for predictable results.
FAQ
CSS transform questions
Why does order matter?
Transform functions are applied in sequence. Reordering the same functions can change both the position and the final shape.
Does transform move surrounding content?
No. Transform changes visual rendering without changing normal document flow.
Where does the preview transform from?
TransformBox uses the center of the preview element as transform-origin, the browser default for most elements.