Component
3D Flipping Project Card Animation in Framer
This is a Framer recreation of the 3D Flipping Project Card Animation from the Size Assets’s website. Remix the project or grab the component to add this interactive 3D flip effect to your own card designs.
Created by
About the resource
To create this 3D flipping card component in Framer, I made a main card component with two variants: side 1 and side 2. In the side 1 variant, I added a sides wrapper frame and turned on 3D transform for it. Inside this wrapper, I created two frames: front and back. The front frame has its backface hidden, while the back frame is rotated 180° on the Y-axis and -180° on the Z-axis. On the text layers, I applied different depth values using translateZ to create a layered and elevated look. For the second variant, side 2, I rotated the sides wrapper frame by 180° on the X-axis to flip the card.
Lastly, I added hover interactions with mouse enter and mouse leave triggers to smoothly transition between both sides during the flip.
About the resource
To create this 3D flipping card component in Framer, I made a main card component with two variants: side 1 and side 2. In the side 1 variant, I added a sides wrapper frame and turned on 3D transform for it. Inside this wrapper, I created two frames: front and back. The front frame has its backface hidden, while the back frame is rotated 180° on the Y-axis and -180° on the Z-axis. On the text layers, I applied different depth values using translateZ to create a layered and elevated look. For the second variant, side 2, I rotated the sides wrapper frame by 180° on the X-axis to flip the card.
Lastly, I added hover interactions with mouse enter and mouse leave triggers to smoothly transition between both sides during the flip.
About the resource
To create this 3D flipping card component in Framer, I made a main card component with two variants: side 1 and side 2. In the side 1 variant, I added a sides wrapper frame and turned on 3D transform for it. Inside this wrapper, I created two frames: front and back. The front frame has its backface hidden, while the back frame is rotated 180° on the Y-axis and -180° on the Z-axis. On the text layers, I applied different depth values using translateZ to create a layered and elevated look. For the second variant, side 2, I rotated the sides wrapper frame by 180° on the X-axis to flip the card.
Lastly, I added hover interactions with mouse enter and mouse leave triggers to smoothly transition between both sides during the flip.
The two variants of the 3D card component in Framer.
The two variants of the 3D card component in Framer.
The two variants of the 3D card component in Framer.
