---
title: "Dual Face Card — Free Framer component · Best of Framer"
description: "Free Framer component · by BAVA Studio · Cards. Interactive 2-sided flip card"
canonical: "https://framer.elliotli.dev/component/dual-face-card"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Dual Face Card

# Dual Face Card

Interactive 2-sided flip card

[View on Framer](https://framer.com/marketplace/components/dual-face-card/?via=elliot-li)

![Dual Face Card preview image 1](https://framer.elliotli.dev/og/component/dual-face-card/70d68e05ae6aaea5/1600x1200.jpg)

## Summary

Interactive 2-sided flip card

## Description

## About this Component

**Flip3D** is a versatile and interactive card component designed for creators who want dynamic, two-sided content without writing any code. Perfect for portfolios, product showcases, or engaging UI sections.

## ✨ Features:

-   Choose flip interaction: **Hover** or **Click**
    
-   Optional **Invert Flip** for reverse animation
    
-   Smooth built-in animation powered by Framer Motion
    
-   Fully customizable content for both sides
    
-   Supports **X-axis** or **Y-axis** rotation
    

## 🛠 How to Use:

### 1\. Connection

-   Prepare front and back sides as Frames/Images/stacks.
    
-   Import the Flip3D component into your Framer project.
    
-   Connect the front and Back sides.
    
-   Edit Properties to your needs.
    

### 2\. Set Interaction

-   Select the card on the canvas.
    
-   From the right-side property panel, choose **Flip On Hover** or **Flip On Click**.
    
-   Optionally, toggle **Invert Flip** to reverse the rotation direction.
    
-   Choose the rotation **Axis (X or Y)** and customize the **transition** for smooth animation.
    

And that’s it! Your card now flips beautifully with full control over interaction and animation.

### This component is perfect for:

-   Portfolios & personal showcases
    
-   Product or feature highlights
    
-   Testimonials or case studies
    
-   Any section that benefits from a touch of interactivity and surprise
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #2340

## Details

- **Author**: BAVA Studio
- **Published**: 2026-04-01
- **Updated**: 2026-04-08
- **Added**: 2026-03-31
- **Categories**: Cards

## More like this

-   [BlogX Blog Card](/component/blogx-blog-card) — Themomarket · $8 — Blog Framer Component
-   [FluxPrice](/component/fluxprice) — Jeshan Athulesh · $49 — Elevate your SaaS conversion rate in minutes with FluxPrice.
-   [Feature Ribbon Cards](/component/feature-ribbon-cards) — Studio Digital · Free — Interactive image feature cards
-   [Dynamic Pricing Calc](/component/dynamic-pricing-calc) — Dmitry Vorobey · $12 — Pricing cards with live calculator