CardFlip3D is a premium 3D flip profile card for Framer that turns a simple contact section into a memorable interaction. The front face displays a circular profile photo, glowing banner, name, and role. On hover, the card performs a smooth 3D rotation to reveal the back — a social media hub with up to 4 clickable platform icons. Every element is fully editable through property controls with zero code required.
Smooth 1.5s 3D flip animation on hover using CSS perspective transforms
Front face with circular profile image, banner title, name, and role text
Back face with heading and up to 4 social media links
Supports Instagram, Twitter / X, WhatsApp, and Facebook
Each social link individually enable/disable toggle
Clickable social icons open in new tab with secure link attributes
Fully customizable card color, text color, glow color, and border radius
Responsive image control for easy profile photo uploads
Hover opacity effect on social icons for polished micro-interaction
Backface hidden for clean, glitch-free flip transitions
Dark theme by default — works beautifully on any background
No external dependencies beyond React and Framer
Fixed 240 × 294px card size with consistent aspect ratio
Profile Image
Image — Upload custom profile photo (circular crop, 100px diameter)
Front Face Text
Front Title — Banner label text (default: "Professional")
Front Heading — Main name display (default: "Sarah")
Front Subtext — Role or description line (default: "Product Designer & Developer")
Back Face Text
Back Heading — Back face headline (default: "Let's Connect")
Social Links
Links — Array of up to 4 social entries, each with:
Platform — Instagram / Twitter / WhatsApp / Facebook
URL — Full link to profile
Enabled — Toggle to show or hide the platform
Visual Styling
Card Color — Background color for both faces (default: #1a1a2e)
Text Color — Primary text color (default: #eaeaea)
Glow Color — Ambient glow accent (default: rgba(138, 85, 255, 0.3))
Border Radius — Card corner rounding 0–50px (default: 24px)
Built with React hooks — useState, useRef
CSS transform-style: preserve-3d and perspective for true 3D depth
backface-visibility: hidden on both faces for clean flipping
Flip triggered by onMouseEnter / onMouseLeave events
Social links use target="_blank" with rel="noopener noreferrer" for security
Fixed layout: 240px × 320px intrinsic size
No external libraries — pure React + CSS
Personal portfolio profile sections
Team pages with individual social links
Freelancer and agency contact cards
Social media link pages as an alternative to Linktree-style layouts
Professional networking and resume sites
Business card replacement on landing pages
Event speaker or presenter profiles
About pages for creators, designers, and developers
3d flip card framer · framer profile card component · flip card framer · business card framer component · social media card framer · 3d card hover framer · interactive profile card · framer flip animation · team member card framer · contact card framer · social links card component · hover flip card framer · portfolio card component · framer 3d component · profile card with social links
Hamim Reza
