---
title: "Hover Cards 3D — Framer component · Best of Framer"
description: "$7.00 · Framer component · by Aidan Looker · Cards. What is Hover Cards 3D?"
canonical: "https://framer.elliotli.dev/component/hover-cards-3d"
---

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

# Hover Cards 3D

Cards that fan into 3D perspective.

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

![Hover Cards 3D preview image 1](https://framer.elliotli.dev/og/component/hover-cards-3d/2ee2ab1b11292cc8/1600x1200.jpg)

## Summary

What is Hover Cards 3D?

## Description

## What is Hover Cards 3D?

Hover Cards 3D is a premium interaction component that transforms a row of feature cards into an overlapping, perspective-driven 3D fan when the user hovers over the container. Each card rotates on the Y-axis, shifts in depth, and scales dynamically to create a natural deck-of-cards effect. Ideal for SaaS feature sections, agency portfolios, product benefit breakdowns, and any layout where static cards fall flat.

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8vjwbcr2-RQLDut7AgLOovQEwgaJNpNG4n3n3B6)](https://teampixelau.lemonsqueezy.com/checkout/buy/3b016e8d-2ba4-4944-8431-e2c592334df1)

## Core Features

-   Five built-in theme presets — Clean, Midnight, Ocean, Ember, and Frost — with a Custom mode for full colour control
    
-   3D perspective fan effect with configurable rotation, spread, depth, and center scale
    
-   Per-card CTA buttons with a premium slide-fill hover animation and individual text and link controls
    
-   Responsive scaling that automatically adjusts the 3D effect intensity based on container width
    
-   Smooth, performant CSS transitions with three speed modes and three easing curves
    

## Controls inside Framer

### Theme

-   Theme preset selector — Clean, Midnight, Ocean, Ember, Frost, or Custom
    

### Cards

-   Up to 5 cards, each with title, description, image, button text, and button link
    

### Layout

-   Gap between cards
    
-   Border radius
    
-   Card padding
    

### Colors (Custom theme only)

-   Card background
    
-   Title colour
    
-   Description colour
    
-   Shadow colour
    

### 3D Effect

-   Rotation — Y-axis tilt angle for side cards
    
-   Spread — horizontal offset that controls overlap intensity
    
-   Depth — Z-axis separation between center and side cards
    
-   Center Scale — scale multiplier for the focused center card
    

### Animation

-   Speed — Fast, Medium, or Slow
    
-   Easing — Smooth, Snappy, or Bouncy
    

### CTA Button

-   Show or hide buttons globally
    
-   Button colour and text colour
    

### Typography

-   Font family and weight
    

## Best use cases

-   SaaS and startup landing pages to showcase three to five key product features with depth and motion
    
-   Agency and portfolio sites to present service offerings or case study categories with a premium interaction
    
-   Product and pricing pages to highlight plan benefits or feature tiers in a visually engaging layout
    
-   Marketing microsites where a single hero interaction needs to communicate value within seconds
    

Drop HoverCards3D into any section and turn a flat feature grid into a dimensional, interactive showcase that holds attention and drives clicks.

## Questions or custom requests?

We design and build custom Framer components. Get in touch at [**contact@teampixel.com.au**](mailto:contact@teampixel.com.au).

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

-   All · #10714

## Details

- **Author**: Aidan Looker
- **Price**: $7.00
- **Published**: 2026-05-12
- **Updated**: 2026-06-13
- **Added**: 2026-05-07
- **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