transform-origin
transform 작업의 기준점(pivot point)을 설정합니다. 회전, 크기 조절, 기울이기 등의 기준이 되는 위치를 지정하며, 기본값은 center입니다.
클래스 목록
| 클래스 | CSS | 설명 |
|---|---|---|
troc | transform-origin: center | 중심 기준 (기본값) |
trot | transform-origin: top | 상단 중앙 기준 |
trob | transform-origin: bottom | 하단 중앙 기준 |
trol | transform-origin: left | 좌측 중앙 기준 |
tror | transform-origin: right | 우측 중앙 기준 |
trotl | transform-origin: top left | 좌상단 기준 |
trotr | transform-origin: top right | 우상단 기준 |
trobl | transform-origin: bottom left | 좌하단 기준 |
trobr | transform-origin: bottom right | 우하단 기준 |
시각적 비교
동일한 45도 회전에 대해 기준점에 따라 결과가 어떻게 달라지는지 비교합니다.
center — troc
top — trot
bottom — trob
top left — trotl
top right — trotr
bottom left — trobl
사용 예시
<!-- 중심 회전 (기본) -->
<div class="troc tr45deg">회전</div>
<!-- 좌상단 기준 회전 -->
<div class="trotl tr45deg">좌상단에서 회전</div>
<!-- 드롭다운: 상단 기준으로 scale -->
<div class="trot ts1 tall200msease hover-ts1-1">
상단 기준 확대
</div>
<!-- 좌상단 메뉴 펼침 효과 -->
<ul class="trotl ts0 hover-ts1 tall300msease">
<li>메뉴 1</li>
<li>메뉴 2</li>
</ul>팁 & 주의사항
기본값은 center
troc는 기본값이므로 일반적인 중심 회전에는 별도 지정이 불필요합니다. 기준점을 변경할 때만 사용하세요.
드롭다운/메뉴 애니메이션
trot(top)을 사용하면 위에서 아래로 펼쳐지는 드롭다운 효과를, trotl(top left)을 사용하면 좌상단에서 펼쳐지는 메뉴 효과를 만들 수 있습니다.