6XC

CSS 트랜스폼 생성기

rotate, scale, translate, skew를 시각적으로 조합하고 결과 transform CSS를 복사하세요.

조회수 974회

transform 속성이란

transform은 문서 흐름에 영향을 주지 않고 요소를 이동, 회전, 확대/축소, 기울이며, GPU 가속을 사용합니다 — 그래서 transform은 opacity와 함께 부드러운 애니메이션에 즐겨 쓰이는 속성입니다. 함수는 오른쪽에서 왼쪽으로 적용되므로 순서가 중요합니다: rotate(45deg) translateX(50px)는 순서를 바꾸면 다른 결과가 됩니다.

자주 묻는 질문

함수 순서가 왜 중요한가요?

각 함수는 다음 함수를 위한 좌표계를 변형시킵니다. translate 다음에 rotate를 적용하면 먼저 이동한 뒤 제자리에서 회전하고, rotate 다음에 translate를 적용하면 축이 먼저 회전하므로 이동이 대각선 방향이 됩니다.

transform이 주변 요소에 영향을 주나요?

아니요 — 요소는 레이아웃에서 원래 차지하던 공간을 그대로 유지합니다. 그래서 transform은 애니메이션 비용이 낮지만, 요소가 겹치는 부분은 직접 신경 써야 합니다.

비슷한 도구

CSS 그라데이션 생성기 실시간 미리보기로 선형, 방사형, 원뿔형 CSS 그라데이션을 디자인하고 코드를 복사하세요. 생성하기 CSS 박스 그림자 생성기 오프셋, 흐림 정도, 퍼짐, 색상, 불투명도, 안쪽 그림자(inset)를 시각적으로 조정하며 실시간 미리보기로 그림자를 디자인하세요. 생성하기 CSS 모서리 둥글기 생성기 각 모서리를 개별적으로 또는 한 번에 px나 %로 둥글리고, 실시간 미리보기와 복사 가능한 CSS를 확인하세요. 생성하기 CSS 텍스트 그림자 생성기 오프셋, 흐림, 색상, 불투명도를 조정해 text-shadow를 디자인하고 샘플 텍스트로 실시간 미리보기를 확인하세요. 생성하기