AAtomic CSS

transform-origin

transform 작업의 기준점(pivot point)을 설정합니다. 회전, 크기 조절, 기울이기 등의 기준이 되는 위치를 지정하며, 기본값은 center입니다.

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스CSS설명
troctransform-origin: center중심 기준 (기본값)
trottransform-origin: top상단 중앙 기준
trobtransform-origin: bottom하단 중앙 기준
troltransform-origin: left좌측 중앙 기준
trortransform-origin: right우측 중앙 기준
trotltransform-origin: top left좌상단 기준
trotrtransform-origin: top right우상단 기준
trobltransform-origin: bottom left좌하단 기준
trobrtransform-origin: bottom right우하단 기준

시각적 비교

동일한 45도 회전에 대해 기준점에 따라 결과가 어떻게 달라지는지 비교합니다.

center — troc

top — trot

bottom — trob

top left — trotl

top right — trotr

bottom left — trobl

사용 예시

<!-- Center rotation (default) -->
<div class="troc tr45deg">Rotate</div>

<!-- Top-left origin rotation -->
<div class="trotl tr45deg">Rotated from top-left</div>

<!-- Dropdown: scale from top origin -->
<div class="trot ts1 tall200msease hover-ts1-1">
  Scale from top origin
</div>

<!-- Top-left menu expand effect -->
<ul class="trotl ts0 hover-ts1 tall300msease">
  <li>Menu 1</li>
  <li>Menu 2</li>
</ul>

팁 & 주의사항

기본값은 center

troc는 기본값이므로 일반적인 중심 회전에는 별도 지정이 불필요합니다. 기준점을 변경할 때만 사용하세요.

드롭다운/메뉴 애니메이션

trot(top)을 사용하면 위에서 아래로 펼쳐지는 드롭다운 효과를, trotl(top left)을 사용하면 좌상단에서 펼쳐지는 메뉴 효과를 만들 수 있습니다.

transformtransform-styletransitionperspective