Animation
Rotating 3D Carousel in Framer
This is a Framer recreation of the rotating 3D carousel effect seen on the Corner website. Feel free to remix the project and explore how this interactive loop of cards can be built in Framer, without writing any code.
Created by
About the resource
To recreate the rotating 3D carousel in Framer, I first set up a 3D space using perspective and preserve-3D transforms. Within this space, I added 12 arms, each rotated on the Y-axis in 30° gap. Each arm holds a card placed at its outer edge and rotated -90° on the Y-axis so it faces outward in the carousel.
About the resource
To recreate the rotating 3D carousel in Framer, I first set up a 3D space using perspective and preserve-3D transforms. Within this space, I added 12 arms, each rotated on the Y-axis in 30° gap. Each arm holds a card placed at its outer edge and rotated -90° on the Y-axis so it faces outward in the carousel.
About the resource
To recreate the rotating 3D carousel in Framer, I first set up a 3D space using perspective and preserve-3D transforms. Within this space, I added 12 arms, each rotated on the Y-axis in 30° gap. Each arm holds a card placed at its outer edge and rotated -90° on the Y-axis so it faces outward in the carousel.
The 3D space setup showing all 12 arms, each holding an image.
The 3D space setup showing all 12 arms, each holding an image.
The 3D space setup showing all 12 arms, each holding an image.
The final touch was adding a loop animation to the 3D space layer, making the circle of cards rotate smoothly and slowly around the Y-axis.
The final touch was adding a loop animation to the 3D space layer, making the circle of cards rotate smoothly and slowly around the Y-axis.
The final touch was adding a loop animation to the 3D space layer, making the circle of cards rotate smoothly and slowly around the Y-axis.
The loop effect settings.
The loop effect settings.
The loop effect settings.
