When to use
- The sensation of cards flipping like a cube or rotating in 3D space
- tech product showcase, brand gallery-style carousel
- 톤: tech, brand
- Recommended duration: 0.6–0.9초
Installation
npx hyperframes add transitions-3d
→ compositions/transitions-3d.html (showcase block, includes multiple 3D variants).
Wiring
<div data-composition-src="compositions/transitions-3d.html"
data-start="4.5" data-duration="0.8"
data-track-index="1"
data-width="1080" data-height="1350">
</div>
Parameters
- Rotation axis, perspective distance, and speed are adjusted by selecting a variant within the showcase
짝
- Good fit:
cinematic-zoom,ui-3d-reveal - Avoid: overlap with other rotation types (
swirl-vortex)