Component
3D Projects Card Flip in Framer
This is a 3D card flip animation recreated in Framer, from Aren Williams’s original work. Feel free to remix the project in Framer to see how it’s built and adapt it to your own designs without code.
Created by
About the resource
To create this 3D card flip animation, I started by building a card flip component with two variants: default and hover. In the default state, the smaller images are placed behind the main image, each wrapped in separate frames. Both the main image and the smaller ones are stacked within a single frame, which is then placed in a 3D space to bring all of them into that perspective. I added depth to the main image at -140 and to the smaller images between 140 and 50, creating a sense of layering.
For the hover state, I rotated the 3D space frame to -180 so that it flips. The smaller images were then repositioned and spread around the main image to complete the effect. Once the positioning was set, I added interactions. To keep the hover smooth, I wrapped the main image in another frame so it stays intact when the animation plays. Finally, I set up mouse enter and leave interactions to switch between the two variants, and the card flip animation was ready.
About the resource
To create this 3D card flip animation, I started by building a card flip component with two variants: default and hover. In the default state, the smaller images are placed behind the main image, each wrapped in separate frames. Both the main image and the smaller ones are stacked within a single frame, which is then placed in a 3D space to bring all of them into that perspective. I added depth to the main image at -140 and to the smaller images between 140 and 50, creating a sense of layering.
For the hover state, I rotated the 3D space frame to -180 so that it flips. The smaller images were then repositioned and spread around the main image to complete the effect. Once the positioning was set, I added interactions. To keep the hover smooth, I wrapped the main image in another frame so it stays intact when the animation plays. Finally, I set up mouse enter and leave interactions to switch between the two variants, and the card flip animation was ready.
About the resource
To create this 3D card flip animation, I started by building a card flip component with two variants: default and hover. In the default state, the smaller images are placed behind the main image, each wrapped in separate frames. Both the main image and the smaller ones are stacked within a single frame, which is then placed in a 3D space to bring all of them into that perspective. I added depth to the main image at -140 and to the smaller images between 140 and 50, creating a sense of layering.
For the hover state, I rotated the 3D space frame to -180 so that it flips. The smaller images were then repositioned and spread around the main image to complete the effect. Once the positioning was set, I added interactions. To keep the hover smooth, I wrapped the main image in another frame so it stays intact when the animation plays. Finally, I set up mouse enter and leave interactions to switch between the two variants, and the card flip animation was ready.
The default and hover variants of the card flip component.
The default and hover variants of the card flip component.
The default and hover variants of the card flip component.
