# 3D Perspective Card

> Features & Technical Highlights Advanced 3D Transformations:  Uses CSS 3D transforms with perspective for realistic depth Custom positioning based on card index relative to active card Smooth transitions between states with cubic-bezier easing Interactive User Experience:  Touch swipe support for mobile devices Auto-play functionality with pause/play toggle Intuitive navigation with dots and arrow controls Hover effects on cards and buttons Visual Design Elements:  Gradient backgrounds with subtle blur effects Decorative floating elements with animation Glass-morphism UI styling for modern aesthetic Responsive design that works on different screen sizes Performance Optimizations:  Uses React's useRef for DOM references Proper cleanup of intervals to prevent memory leaks Conditional rendering for efficient DOM updates Optimized motion transitions Accessibility Features:  Proper aria labels on interactive elements Keyboard navigable interface Sufficient color contrast for text readability Focus states for keyboard users This component combines beautiful visual design with advanced interaction patterns to create an immersive 3D card carousel experience that will impress users and elevate your application's UI.

- Author: [Dhileep Kumar GM](https://21st.dev/@dhileepkumargm)
- License: no-license
- Tags: Rating, Glassmorphism, Gradient, Image Card, 3D Card
- npm dependencies: framer-motion
- Live preview: https://21st.dev/@dhileepkumargm/components/3d-perspective-card

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dhileepkumargm/3d-perspective-card?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt · More like this: https://21st.dev/community/components/s/rating.md