Flip In (플립 인)

요소가 Y축을 중심으로 한 바퀴 돌면서 보는 사람 쪽으로 살짝 다가왔다가 돌아갑니다.

[적용할 곳]에 플립(Flip) 애니메이션을 넣어 줘.
요소가 세로축을 중심으로 한 바퀴 돌면서 보는 사람 쪽으로 살짝 다가오고, 크기가 아주 살짝 줄었다가 제자리로 돌아오게 해 줘. 생기 있지만 짧게.
회전이 입체적으로 보이게 원근감(perspective)을 주고, 반복하지 말고 한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 회전을 생략해 줘.

카드가 축을 중심으로 반 바퀴 돌아 뒷면을 보여 줍니다.

[적용할 곳]에 카드 플립(Card Flip) 효과를 넣어 줘. 플립 카드(flip card), 카드 플립 3D(card flip 3D)라고도 불러.
포인터가 카드 위에 오면 카드가 세로축을 중심으로 원근감 있게 뒤집혀 뒷면을 보여 주고, 벗어나면 다시 돌아오게 해 줘. 부드럽고 일정하게.
각 면의 뒤쪽은 숨겨서 앞뒷면이 서로 비쳐 보이지 않게 하고, 키보드 포커스와 터치 기기의 탭으로도 뒤집히게 해 줘.

요소가 3D로 회전해 옆면만 남으며 보이지 않게 됩니다.

[적용할 곳]에 플립 아웃(Flip Out) 퇴장 애니메이션을 넣어 줘. 플립 아웃 X(flip out X), 플립 아웃 Y(flip out Y)라고도 불러.
요소가 살짝 뒤로 기울었다가 세로축을 중심으로 돌아 옆면만 남으며 사라지게 해 줘. 빠르고 깔끔하게.
회전이 입체적으로 보이게 원근감(perspective)을 주고, 회전이 끝난 뒤에 요소를 없애고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 숨겨 줘.

글자나 단어가 축을 중심으로 3D 회전하며 뒷면의 다음 텍스트를 보여 줍니다.

[적용할 곳]에 텍스트 3D 플립(Text 3D Flip) 호버 효과를 넣어 줘. 3D 플립 텍스트 리빌(3D flip text reveal)이라고도 불러.
포인터가 텍스트 위에 오면 각 글자가 가로축을 중심으로 3D로 굴러 넘어가며 뒷면의 새 글자를 보여 주고, 한 글자씩 빠르고 부드럽게 훑듯이 이어지다가 포인터가 떠나면 다시 돌아오게 해 줘.
넘어가는 동안 텍스트 상자 크기는 그대로 두고, 키보드 포커스에도 같은 효과를 보여 줘.

요소가 왼쪽 위 모서리를 경첩 삼아 흔들리며 매달렸다가 화면 밖으로 떨어집니다.

[적용할 곳]에 힌지(Hinge) 퇴장 애니메이션을 넣어 줘.
나사가 풀린 것처럼 요소가 왼쪽 위 모서리를 축으로 아래로 늘어지고, 앞뒤로 흔들리다가 사라지면서 화면 밖으로 떨어지게 해 줘. 느리고 코믹하게, 의도적으로.
레이아웃을 밀거나 스크롤바를 만들지 않고 다른 내용 위로 떨어지게 하고, 다 떨어지면 없애고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 숨겨 줘.

요소가 작고 기울어진 상태에서 튀어나와 살짝 지나쳤다가, 깜짝 상자 장난감처럼 자리 잡습니다.

[적용할 곳]에 잭 인 더 박스(Jack In The Box) 등장 애니메이션을 넣어 줘.
요소가 아래쪽 가장자리를 축으로, 아주 작고 기울어진 상태에서 튀어 올라 똑바른 자세를 넘나들며 좌우로 흔들리다 자리 잡게 해 줘. 탄력 있고 장난스럽게.
한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 제자리에 보여 줘.