3D Image Fan
A copy-paste galleries & carousels component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Galleries & CarouselsHTMLCSSany framework
Copy into your project
HTML
<div class="nuda-fan3d">
<span class="nuda-fan3d__card" style="--r:-12deg;--x:-30px"></span>
<span class="nuda-fan3d__card" style="--r:0deg;--x:0"></span>
<span class="nuda-fan3d__card" style="--r:12deg;--x:30px"></span>
</div>CSS
.nuda-fan3d__card {
position: absolute;
width: 70px;
height: 90px;
border-radius: 10px;
box-shadow:
0 8px 20px -8px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
transform: rotate(var(--r, 0deg)) translateX(var(--x, 0));
transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.nuda-fan3d:hover .nuda-fan3d__card:nth-child(1) {
transform: rotate(-20deg) translateX(-50px) translateY(-6px);
}
.nuda-fan3d:hover .nuda-fan3d__card:nth-child(2) {
transform: translateY(-10px) scale(1.05);
}
.nuda-fan3d:hover .nuda-fan3d__card:nth-child(3) {
transform: rotate(20deg) translateX(50px) translateY(-6px);
}How to use 3D Image Fan
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.