Visual Behavior:
This mode projects the carousel cards onto a virtual 3D cylinder. The rotation behavior adapts automatically depending on the carousel's scrollDirection:
-
For Horizontal Scrolling (scrollDirection == Axis.horizontal):
- The cylinder rotates around a vertical axis (like a carousel / merry-go-round).
- Y-axis Rotation (Yaw): Cards rotate left and right as they move away from the center, looking like they are wrapping around a vertical drum.
- Z-depth Translation: Cards translate backwards into the screen (Z-depth) on both sides of the focal point.
-
For Vertical Scrolling (scrollDirection == Axis.vertical):
- The cylinder rotates around a horizontal axis (like a slot machine reel or Ferris wheel).
- X-axis Rotation (Pitch): Cards tilt forward and backward as they scroll up and down.
- Z-depth Translation: Cards translate backwards into the screen (Z-depth) as they slide away from the center.
Example Use Case:
- Horizontal: Rotating 3D carousel menus, circular dashboards.
- Vertical: Slot machine reels, date pickers, rolling lists.
Visual Behavior:
This mode projects the carousel cards onto a virtual 3D cylinder. The rotation behavior adapts automatically depending on the carousel's
scrollDirection:For Horizontal Scrolling (
scrollDirection == Axis.horizontal):For Vertical Scrolling (
scrollDirection == Axis.vertical):Example Use Case: