Card Flip (카드 플립)

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

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

요소가 가로축이나 세로축을 중심으로 3D 회전해, 옆면만 보이던 상태에서 정면을 향하게 됩니다.

[적용할 곳]에 플립 인(Flip In) 등장 애니메이션을 넣어 줘. 플립 인 X(flip in X), 플립 인 Y(flip in Y)라고도 불러.
요소가 옆면만 보이는 상태에서 시작해 가로축을 중심으로 돌아 정면을 향하고, 살짝 지나쳤다가 돌아와 자리 잡게 해 줘. 빠르게, 작은 흔들림과 함께.
회전이 입체적으로 보이게 원근감(perspective)을 주고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 정면 상태로 보여 줘.

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

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

내용이 놓인 정육면체가 회전하며 다음 면을 보여 줍니다.

[적용할 곳]에 큐브 로테이트(Cube Rotate) 전환을 넣어 줘. 3D 큐브(3D cube), 큐브 트랜지션(cube transition)이라고도 불러.
원근감 있는 정육면체의 옆면들에 내용을 배치하고, 다음을 누를 때마다 정육면체가 세로축을 중심으로 부드럽게 돌아 다음 면이 앞으로 오게 해 줘.
키보드와 스크린 리더는 앞면에만 닿게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 단순한 페이드로 바꿔 줘.

카드가 조금씩 어긋나게 쌓여 있고, 맨 위 카드가 비켜나며 다음 카드를 드러냅니다.

[적용할 곳]에 카드 스택(Card Stack)을 넣어 줘. 스택드 카드(stacked cards)라고도 불러.
카드를 조금씩 어긋나게 뒤로 겹쳐 두고, 누를 때마다 맨 위 카드가 옆으로 휙 빠져 맨 뒤로 들어가면서 나머지가 한 칸씩 앞으로 나오게 해 줘. 부드럽고 가볍고 빠르게.
키보드로 조작할 수 있게 하고, 스크린 리더가 모든 카드에 순서대로 닿게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 단순한 페이드로 바꿔 줘.

가운데 항목은 정면을 보고, 양옆 항목은 원근감 있게 비스듬히 돌아가 있습니다.

[적용할 곳]에 커버플로(Coverflow) 캐러셀을 넣어 줘. 커버 플로 캐러셀(cover flow carousel)이라고도 불러.
가운데 항목은 정면을 보고 양옆 항목은 원근감 있게 비스듬히 돌아가 있게 해 줘. 옆으로 드래그하면 줄이 밀리고, 손을 떼면 가장 가까운 항목에 부드럽게 멈추게.
드래그 말고도 방향키와 스와이프를 지원하고, 터치 기기에서 페이지 세로 스크롤이 계속 되게 해 줘.