Spinning Cube
Code
| 1 | <Anime |
| 2 | autoplay={autoplay} |
| 3 | duration={4000} |
| 4 | loop |
| 5 | ease="inOutQuad" |
| 6 | rotateX={axis === 'y' ? '-20deg' : '1turn'} |
| 7 | rotateY={axis === 'x' ? '-30deg' : '1turn'} |
| 8 | onControlsReady={handleControlsReady} |
| 9 | > |
| 10 | <div style={{ transformStyle: 'preserve-3d' }}>{faces}</div> |
| 11 | </Anime> |
3D cube with dual-axis rotation via turn/deg values and controls.
Live preview
Spinning 3D CubeDual-axis rotation
Props
| Name | Type | Default | Description |
|---|---|---|---|
| rotateY | string | number | '1turn' | Y rotation (turn/deg units; '-30deg' when axis='x') |
| rotateX | string | number | '1turn' | X rotation (turn/deg units; '-20deg' when axis='y') |
| ease | string | 'inOutQuad' | Easing (not linear) |
| loop | boolean | true | Loop the rotation |
| duration | number | 3000 | Duration in ms |
| axis | 'x'|'y'|'both' | 'both' | Rotation axis |
| onControlsReady | function | - | Receives playback controls for pause/resume/reverse |