CSS 트랜스폼 생성기

translate(X/Y/Z), scale(X/Y), rotate(Z/X/Y), skew(X/Y)를 위한 슬라이더와 편집 가능한 transform-origin, 그리고 조정 가능한 미리보기 박스 크기를 사용해 transform 선언을 대화형으로 구성할 수 있습니다. 생성되는 CSS는 이동에 translate3d를 사용하고, scale/rotate/rotateX/rotateY/skew는 변경된 경우에만 결합하여 출력되며, transform-origin과 함께 내보내집니다.

1. Translate, Scale, Rotate, Skew 아래의 슬라이더를 드래그하여 transform을 구성합니다. 각 값에는 정밀하게 입력할 수 있는 숫자 입력란도 있습니다. 2. 미리보기 Box Size(50–250px)를 조정하고, Transform-Origin(임의의 CSS origin 문자열, 기본값 50% 50%)을 편집합니다. 3. Reset을 클릭하면 모든 값이 중립 기본값으로 돌아갑니다. 4. Copy를 클릭하면 transform: ... 선언과 transform-origin: ... 선언이 모두 복사됩니다.

translateX/Y/Z: -200 ~ 200 px, 하나라도 0이 아니면 translate3d(x, y, z)로 묶어 출력됩니다. scaleX/Y: 0.1 ~ 3, 하나라도 1이 아니면 scale(x, y)로 출력됩니다. rotate (Z): -360 ~ 360deg. rotateX/Y: -180 ~ 180deg. skewX/Y: -60 ~ 60deg, 하나라도 0이 아니면 skew(x, y)로 출력됩니다. 아무 함수도 변경되지 않으면 출력은 transform: none입니다.