효과Effects / 기본기Principles / Nº 022

회전Rotation

Rotation

회전

022

렌더 추가 예정CLIP COMING회전Rotation정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 022. 회전 · Rotation · power2.out

중심점 둘레로 방향을 바꾸는 기본 회전Turns an element around a center point to change its direction.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

방향과 자세가 바뀌었다는 것을 명확히 알린다Clearly tells that direction or posture has changed.

언제 쓰나Use whenUSE WHEN

화살표·펼침 아이콘이 상태에 따라 돌 때
카드나 다이어그램 노드를 90도 돌려 축을 바꿀 때

When an arrow or expand icon turns with state
When rotating a card or diagram node 90 degrees to switch axis

과용 주의AvoidAVOID

회전 중심을 명시
텍스트는 회전 없이 아이콘만
각도는 90 또는 180 배수

분류TagsTAGS

기본기Principles 강조Emphasis 순서·흐름Sequence 웹 UIWeb UI 설명 영상Explainer video 발표Presentation 난이도 기본Basicgsap

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

화살표 아이콘이 300ms 동안 90도 돌아 아래를 가리킨다

과용 · 나쁜 사례OVERUSE

회전 중심이 요소 밖이라 궤도를 그리며 흔들리거나, 텍스트를 여러 바퀴 돌린다

파라미터Parameters

기본값은 클립에 쓴 값Defaults are the values used in the clip

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
각도	90deg	45~180deg	한 방향 고정
길이	300ms	200~500ms	회전 시간
원점	50% 50%	요소별	아이콘 중앙
이징	power2.out	power2~power3.out	도착에서 감속

GSAP

tl.to('.chevron', { rotation: 90, transformOrigin: '50% 50%', duration: 0.3, ease: 'power2.out' }, 0.4);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

GSAP으로 <대상> 화살표 아이콘을 회전시켜줘. 0.4초부터 0.3초 동안 rotation 0에서 90도, transformOrigin 50% 50%, power2.out. 각도는 절대값으로 지정하고 텍스트는 돌리지 않아. paused 타임라인에 넣어.

Rotate the <target> arrow icon with GSAP. From 0.4s over 0.3s rotate 0 to 90 degrees around 50% 50% with power2.out. Use absolute angles and do not rotate text. Paused timeline.

Codex

<파일>의 <대상>에 rotate를 적용해. to({rotation 90, transformOrigin '50% 50%'}, 0.3s, power2.out, position 0.4). 0.4초·0.55초·0.9초를 캡처해 0도, 중간각, 90도를 확인하고 중심이 이동하지 않았는지 좌표를 비교해.

Apply rotate to <target> in <file>. to({rotation 90, transformOrigin '50% 50%'}, 0.3s, power2.out, position 0.4). Capture at 0.4s, 0.55s and 0.9s to check 0 degrees, a mid angle and 90 degrees, and compare coordinates to confirm the center did not move.