Component
3D Box Carousel in Framer
This is a Framer recreation of the 3D box carousel by Daniel Petho, built using 3D transforms, click interactions, and a clever reset trick to keep the loop seamless—all without writing any code. Feel free to remix the project and explore how it’s made.
Created by
About the resource
To create this 3D box carousel in Framer, I started by building a cube-like structure using 3D transforms, where each face holds a different image. I then added two button components and stacked them together with the 3D box inside the default variant.
After that, I created multiple variants of the box, rotating it along the X-axis by +90° or -90° with each step — this allows the carousel to move forward or backward when the buttons are clicked. I connected these variants to the buttons using click interactions with ease transitions for smooth movement.
Here’s the key part: when the box reaches either 360° or -360°, I added an appear interaction that takes it to a helper variant automatically. The helper looks just like the default (not rotated) but works as a reset point. From there, I used an instant transition back to the default variant.
About the resource
To create this 3D box carousel in Framer, I started by building a cube-like structure using 3D transforms, where each face holds a different image. I then added two button components and stacked them together with the 3D box inside the default variant.
After that, I created multiple variants of the box, rotating it along the X-axis by +90° or -90° with each step — this allows the carousel to move forward or backward when the buttons are clicked. I connected these variants to the buttons using click interactions with ease transitions for smooth movement.
Here’s the key part: when the box reaches either 360° or -360°, I added an appear interaction that takes it to a helper variant automatically. The helper looks just like the default (not rotated) but works as a reset point. From there, I used an instant transition back to the default variant.
About the resource
To create this 3D box carousel in Framer, I started by building a cube-like structure using 3D transforms, where each face holds a different image. I then added two button components and stacked them together with the 3D box inside the default variant.
After that, I created multiple variants of the box, rotating it along the X-axis by +90° or -90° with each step — this allows the carousel to move forward or backward when the buttons are clicked. I connected these variants to the buttons using click interactions with ease transitions for smooth movement.
Here’s the key part: when the box reaches either 360° or -360°, I added an appear interaction that takes it to a helper variant automatically. The helper looks just like the default (not rotated) but works as a reset point. From there, I used an instant transition back to the default variant.
The variant structure behind the seamless 3D box carousel.
The variant structure behind the seamless 3D box carousel.
The variant structure behind the seamless 3D box carousel.
