New

IsometricCard

Card with CSS 3D transform giving isometric perspective on hover with smooth transitions.

Creative & Unique3disometrictransformperspectivehover

Dependencies

shadcn/ui components needed:

npx shadcn@latest add lucide-react

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client";
2
3import { Box, Layers, Cpu } from "lucide-react";
4
5const cards = [
6  { title: "Frontend", desc: "React, Next.js, Tailwind", icon: Box, gradient: "from-violet-500 to-indigo-600", shadow: "shadow-violet-500/20" },
7  { title: "Backend", desc: "Node.js, PostgreSQL, Redis", icon: Layers, gradient: "from-emerald-500 to-teal-600", shadow: "shadow-emerald-500/20" },
8  { title: "Infrastructure", desc: "Docker, K8s, Terraform", icon: Cpu, gradient: "from-orange-500 to-red-600", shadow: "shadow-orange-500/20" },
9];
10
11export default function IsometricCard() {
12  return (
13    <div className="flex flex-wrap items-center justify-center gap-6 py-12" style={{ perspective: "1200px" }}>
14      {cards.map((card, i) => (
15        <div
16          key={card.title}
17          className={`group w-56 cursor-pointer rounded-2xl border border-zinc-200 bg-white p-6 transition-all duration-500 ease-out hover:shadow-2xl dark:border-zinc-800 dark:bg-zinc-950 ${card.shadow}`}
18          style={{
19            transform: "rotateY(-8deg) rotateX(4deg)",
20            transformStyle: "preserve-3d",
21            transition: "transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.5s ease",
22          }}
23          onMouseEnter={(e) => {
24            (e.currentTarget as HTMLElement).style.transform = "rotateY(0deg) rotateX(0deg) translateZ(20px)";
25          }}
26          onMouseLeave={(e) => {
27            (e.currentTarget as HTMLElement).style.transform = "rotateY(-8deg) rotateX(4deg)";
28          }}
29        >
30          <div className={`mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br ${card.gradient}`} style={{ transform: "translateZ(30px)", transformStyle: "preserve-3d" }}>
31            <card.icon className="h-6 w-6 text-white" />
32          </div>
33          <h3 className="text-lg font-bold text-zinc-900 dark:text-zinc-50">{card.title}</h3>
34          <p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">{card.desc}</p>
35          <div className={`mt-4 h-1.5 w-full overflow-hidden rounded-full bg-zinc-100 dark:bg-zinc-800`}>
36            <div className={`h-full rounded-full bg-gradient-to-r transition-all duration-700 group-hover:w-full ${card.gradient}`} style={{ width: `${60 + i * 15}%` }} />
37          </div>
38        </div>
39      ))}
40    </div>
41  );
42}