CSS 예제 16 / 20
transform 은 요소의 레이아웃(다른 요소 위치)에 영향을 주지 않고 시각적으로만 이동·회전·확대합니다 — 그래서 애니메이션 성능이 좋아요.
translate
rotate
scale
transform-origin
💡 이렇게 바꿔보세요
- 여러 변형을 한 번에 쓰려면 공백으로 이어 쓰세요:
transform: rotate(10deg) scale(1.2); (순서가 결과에 영향을 줘요)
transform-origin 으로 회전/확대의 '기준점'을 바꿀 수 있어요 (기본값은 중심)- 3D 가 궁금하다면
rotateX()/rotateY() 와 부모에 perspective 를 함께 써보세요
← CSS 예제 목록