---
title: "3D Tilt Card Hover — Framer component · Best of Framer"
description: "$9.00 · Framer component · by Soyeb · Cards. Depth to your cards with 3D Card"
canonical: "https://framer.elliotli.dev/component/3d-tilt-card-hover"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/3D Tilt Card Hover

# 3D Tilt Card Hover

Depth to your cards with 3D Card

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

![3D Tilt Card Hover preview image 1](https://framer.elliotli.dev/og/component/3d-tilt-card-hover/48495cf49e8d1c6b/1600x1200.jpg)

## Summary

Depth to your cards with 3D Card

## Description

## Make your cards feel alive

You've probably seen those cards that subtly move as you hover - not just scaling, but actually reacting to your cursor with depth and motion.

That's the difference between a flat UI and an interactive 3D card.

## What makes this different from other tilt effects

Most card tilt effects are limited to a single flat layer - you get a basic hover animation, but everything moves as one piece.

This component goes beyond that.

You build your 3D parallax card directly on the Framer canvas with real layers, real content, and full control then the tilt card effect applies on top of it.

## Instructions

Setting up the 3D Tilt Hover component takes less than two minutes:

-   Create a Stack (e.g. Tilt Card) to act as the outer container
    
-   Drop the **3D Tilt Helper** component inside the stack and set its position to Absolute - it becomes invisible and takes no layout space
    
-   Place your Card (or any element you want to tilt) directly after the helper in the layer order
    
-   Select the Tilt Card stack and set **Overflow → Visible**
    
-   Match the **Perspective** value on the Card wrapper with the value in the component, then enable **Preserve 3D → Yes**
    
-   Select the 3D Tilt Hover layer and adjust behavior from the right panel
    

### To create layered depth:

-   Select inner elements (image, text, logo)
    
-   Go to **Transforms → + → Depth**
    
-   Increase value to push elements forward
    
-   If depth isn’t visible, enable **Preserve 3D → Yes** on the parent
    

## How It Works

The component includes 9 property controls in Framer’s right panel:

### Properties Control

![3D Tilt Hover Framer Component Control](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-zf78gyj4-c7YebxuXkihrqiMnVrCJtnWtWUpoSP)3D Tilt Hover Framer Component Control

-   **Tilt Mode:** Switch between _Follow_ (card tilts toward cursor) and _Repel_ (card pushes away).
    
-   **Tilt Intensity:** Controls maximum rotation. Higher values create a stronger **tilt effect**.
    
-   **Tilt Axis:** Choose Free (X + Y), X-only, or Y-only movement.
    
-   **Origin X / Origin Y:** Defines the pivot point of the tilt (center by default). Adjust for asymmetric tilt behavior.
    
-   many more
    

**Made with** ❤ **by** [**Soyeb**](https://framer.link/market)

Have questions or need a custom Framer component? Reach out at [heysoyebali@gmail.com](mailto:heysoyebali@gmail.com)

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

-   All · #1390

## Details

- **Author**: Soyeb
- **Price**: $9.00
- **Published**: 2026-06-21
- **Updated**: 2026-06-22
- **Added**: 2026-06-21
- **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