3D Carousel (3D 캐러셀)

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

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

슬라이드가 보이는 영역을 가로로 지나가며 한 장씩 제자리에 딱 맞춰집니다.

[적용할 곳]에 캐러셀 슬라이드(Carousel Slide)를 넣어 줘. 슬라이더(slider), 스와이프 캐러셀(swipe carousel)이라고도 불러.
한 단계마다 줄이 옆으로 밀려 다음 슬라이드가 가운데에 딱 맞춰지게 해 줘. 부드럽게 감속하고, 양옆 가장자리에 이웃 슬라이드가 살짝 보이고, 위치 점도 함께 따라가게.
한 번에 한 장씩 넘기고, 버튼과 방향키뿐 아니라 터치 스와이프도 지원하고, 컨트롤에는 스크린 리더용 라벨을 달아 줘.

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

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

마커나 호가 그려진 3D 지구가 레이아웃 안에서 회전합니다.

[적용할 곳]에 3D 글로브(3D Globe)를 넣어 줘. 인터랙티브 글로브(interactive globe)라고도 불러.
표면에 마커 몇 개가 있는 지구본이 마커와 함께 축을 중심으로 느리고 일정하게 돌게 해 줘. 차분하고 끊김 없이.
장식으로 두고 보여 주는 정보는 텍스트 대체를 마련하고, 화면 밖에 있을 때는 멈추고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 회전을 멈춰 줘.

포인터를 올리면 카드가 원근감 있게 뒤로 기울고, 핀과 빛이 보는 사람 쪽으로 솟아오릅니다.

[적용할 곳]에 3D 핀(3D Pin) 호버 효과를 넣어 줘. 핀 호버 3D(pin hover 3D)라고도 불러.
포인터가 카드 위에 오면 카드가 원근감 있게 뒤로 기울고, 밑동에 은은한 빛이 있는 핀이 가운데에서 솟아오르게 해 줘. 포인터가 벗어나면 모두 제자리로. 부드럽게, 튕기지 않게.
레이아웃에서 카드가 차지하는 자리는 그대로 두고, 키보드 포커스에도 같은 효과를 보여 줘.

카드가 포인터 쪽으로 원근감 있게 기울고, 겹겹이 놓인 내용이 표면에서 떠오릅니다.

[적용할 곳]에 3D 틸트(3D Tilt) 효과를 넣어 줘. 퍼스펙티브 틸트(perspective tilt), 틸트 카드(tilt card)라고도 불러.
포인터가 움직이면 카드가 그쪽으로 원근감 있게 기울고, 안쪽 레이어들이 서로 다른 깊이로 표면에서 떠오르게 해 줘. 포인터가 벗어나면 부드럽게 평평하게 돌아오게. 부드럽고 은은하게.
글자가 잘 읽히도록 기울기는 살짝만 주고, 터치 기기와 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 카드를 평평하게 둬.