CSS transform의 translate · rotate · scale · skew를 동시에 조정하며 미리보기와 코드를 만듭니다.

CSS 코드

CSS 트랜스폼 사용법

  1. 각 슬라이더를 조정해 원하는 변형을 만듭니다.
  2. 미리보기에서 결과를 즉시 확인합니다.
  3. 복사 버튼으로 CSS 코드를 가져갑니다.
  4. 요소에 적용해 호버·애니메이션 효과로 활용합니다.

주요 기능

  • Translate X/Y (위치 이동)
  • Rotate (회전)
  • Scale (크기 조절)
  • Skew X/Y (기울이기)
  • 실시간 미리보기 + 한 번 클릭 코드 복사

활용 예시

  • 호버 시 살짝 떠오르는 효과 (translateY + scale)
  • 아이콘 회전 애니메이션
  • 비스듬한 카드 디자인 (skew)
  • 이미지 줌 효과
  • 화살표·로딩 스피너

transform vs position 차이

transform: translate는 GPU 가속을 받아 부드럽고 다른 요소 레이아웃에 영향을 주지 않습니다. position: absolute의 top/left는 레이아웃을 다시 계산하므로 애니메이션에는 transform이 더 좋습니다.

자주 묻는 질문

여러 transform을 같이 쓰면 순서가 중요한가요?

네, translate(X) rotate(90deg)와 rotate(90deg) translate(X)는 결과가 다릅니다. 회전 후 이동은 회전된 좌표계 기준으로 이동합니다.

transform-origin은 무엇인가요?

변형의 기준점입니다. 기본값은 요소 가운데(50% 50%)이며, transform-origin: top left로 바꾸면 좌상단 기준으로 회전·확대됩니다.

transition과 함께 쓰려면?

transition: transform 0.3s ease를 추가하면 호버·클릭 시 부드럽게 애니메이션됩니다.

3D 변형도 가능한가요?

네, rotateX, rotateY, perspective로 3D 변형이 가능합니다. 본 도구는 2D만 지원하며, 3D는 직접 코드를 추가하세요.