---
title: "3D Tilt on Flip card — Free Framer component · Best of Framer"
description: "Free Framer component · by Vraj Sensei · Cards. Hover to Tilt it, Tap to Flip it!"
canonical: "https://framer.elliotli.dev/component/3d-tilt-on-flip-card"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/3D Tilt on Flip card

# 3D Tilt on Flip card

Hover to Tilt it, Tap to Flip it!

[View on Framer](https://framer.com/marketplace/components/3d-tilt-on-flip-card/?via=elliot-li)

![3D Tilt on Flip card preview image 1](https://framer.elliotli.dev/og/component/3d-tilt-on-flip-card/df0ce482893bcf08/1600x1200.jpg)

## Summary

Hover to Tilt it, Tap to Flip it!

## Description

### About this Component

A sleek, interactive 3D card that tilts on hover and flips on tap - bringing depth, motion, and delight to any layout. The front showcases your image, while the back reveals custom text content. Fine-tune every detail with built-in controls for tilt strength, max width, shimmer effects, and more. No code required.

### Features

-   Smooth 3D tilt effect on hover
    
-   Tap-to-flip with front (image) and back (text) sides
    
-   Adjustable tilt strength and sensitivity
    
-   Customizable max width for responsive layouts
    
-   Built-in shimmer/glare overlay effect
    
-   Fully controlled via Framer properties - no code needed
    
-   Lightweight and performant
    

These are the functionalities you will get inside the component:

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-1cjdt0ts-OqfezascvgR5h7HkdM50v0RNrEgY0Y)

### Use Cases

-   Product cards with image + description reveal
    
-   Portfolio project showcases
    
-   Team member or profile cards
    
-   Feature highlights on landing pages
    
-   Interactive image galleries
    
-   Premium service or pricing displays
    

### Built For

-   Designers who want tactile, eye-catching card interactions
    
-   Developers looking for a drop-in, customizable Framer component
    
-   Marketers building high-engagement landing pages
    

### How to Use

1.  Drag the component onto your Framer canvas
    
2.  Set your front image and back text content
    
3.  Adjust tilt strength, max width, and shimmer settings via properties
    
4.  Preview the hover tilt and tap flip interactions
    
5.  Publish - your interactive card is live!
    

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

-   All · #1337

## Details

- **Author**: Vraj Sensei
- **Published**: 2026-02-17
- **Updated**: 2026-02-20
- **Added**: 2026-02-11
- **Categories**: Cards

## More like this

-   [Particle Team Cards](/component/particle-team-cards) — Frame Native · Free — Portraits that move as particles
-   [Card Swap](/component/card-swap) — Antoine Lacombled · $9 — A 3D card stack you can fling
-   [Overlay Reveal Card](/component/overlay-reveal-card) — Pentaclay · Free — Project Card With Hover Overlay
-   [Deckshift](/component/deckshift) — BeyondPixel · $15 — Interactive Stacked Focus Cards