3D Card Flip
A copy-paste 3d effects component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
3D EffectsHTMLCSSany framework
Front
Back
Copy into your project
HTML
<div class="nuda-card-flip">
<div class="nuda-card-flip__inner">
<div class="nuda-card-flip__front">
<p>Front side</p>
</div>
<div class="nuda-card-flip__back">
<p>Back side</p>
</div>
</div>
</div>CSS
/* 3D Card Flip
Card with perspective 3D flip on hover.
Customize: --card-accent, --card-width, --card-height */
.nuda-card-flip {
--card-accent: #e4ff54;
--card-width: 200px;
--card-height: 140px;
width: var(--card-width);
height: var(--card-height);
perspective: 600px;
cursor: pointer;
}
.nuda-card-flip__inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s ease;
transform-style: preserve-3d;
}
.nuda-card-flip:hover .nuda-card-flip__inner {
transform: rotateY(180deg);
}
.nuda-card-flip__front,
.nuda-card-flip__back {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
backface-visibility: hidden;
}
.nuda-card-flip__front {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #ccc;
}
.nuda-card-flip__back {
background: var(--card-accent);
color: #0a0a0a;
transform: rotateY(180deg);
}
@media (prefers-reduced-motion: reduce) {
.nuda-card-flip__inner {
transition: none;
}
}How to use 3D Card Flip
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.