4 Tailwind2 with JSPublished 2026-10-05Free · no sign-up
Six 3D tilt cards built with Tailwind utilities: a card that leans back on hover, one that follows the pointer, a pass with a moving glare, layered depth with translateZ, a link card that tilts on keyboard focus too and a grid of swinging tiles.
A card that leans back in 3D on hover using only utilities: a perspective on the wrapper from an arbitrary property and a rotateX/rotateY transform on hover. The motion-safe: prefix means it never tilts for people who prefer reduced motion.
The card leans towards the pointer. A few lines of JavaScript write two custom properties and one arbitrary transform utility reads them, so all the styling stays in Tailwind classes. The script does nothing when reduced motion is requested.
View code
<div class="[perspective:900px]">
<div data-tilt class="w-64 max-w-full rounded-2xl bg-slate-900 p-6 text-slate-100 shadow-2xl ring-1 ring-white/10 transition-transform duration-150 ease-out [transform:rotateX(var(--rx,0deg))_rotateY(var(--ry,0deg))]">
<p class="text-xs font-semibold uppercase tracking-widest text-cyan-300">Move your pointer</p>
<h3 class="mt-2 text-xl font-bold">Follows the cursor</h3>
<p class="mt-1 text-sm text-slate-300">The card leans towards the pointer and settles back when it leaves.</p>
</div>
</div>
var c = document.querySelector('[data-tilt]');
if (!matchMedia('(prefers-reduced-motion: reduce)').matches) {
c.addEventListener('pointermove', function (e) { var r = c.getBoundingClientRect(), x = (e.clientX - r.left) / r.width - .5, y = (e.clientY - r.top) / r.height - .5; c.style.setProperty('--ry', x * 16 + 'deg'); c.style.setProperty('--rx', -y * 16 + 'deg'); });
c.addEventListener('pointerleave', function () { c.style.setProperty('--rx', '0deg'); c.style.setProperty('--ry', '0deg'); });
}
03. Tailwind Tilt Card with Glare
TailwindTiltGlare
A pass-style card that tilts with the pointer while a soft highlight follows it across the surface. The glare is an aria-hidden span with a radial gradient positioned by custom properties, faded in with group-hover:opacity-100.
var g = document.querySelector('[data-glare]'), still = matchMedia('(prefers-reduced-motion: reduce)').matches;
g.addEventListener('pointermove', function (e) { var r = g.getBoundingClientRect(), x = (e.clientX - r.left) / r.width, y = (e.clientY - r.top) / r.height; g.style.setProperty('--gx', x * 100 + '%'); g.style.setProperty('--gy', y * 100 + '%'); if (!still) { g.style.setProperty('--ry', (x - .5) * 14 + 'deg'); g.style.setProperty('--rx', (.5 - y) * 14 + 'deg'); } });
g.addEventListener('pointerleave', function () { g.style.setProperty('--rx', '0deg'); g.style.setProperty('--ry', '0deg'); });
04. Tailwind 3D Layered Tilt
TailwindTiltDepth
Layers inside the card sit at different depths with translateZ, and transform-style: preserve-3d keeps them in 3D space, so tilting on hover reveals a parallax between them. All of it is arbitrary property utilities.
A whole card that is one link, tilting on hover and on keyboard focus alike, so keyboard users get the same feedback as mouse users. The focus outline is offset from the card so it stays visible during the tilt.
A row of category tiles that each swing on their vertical axis when hovered, sharing one perspective set on the grid. odd: and even: variants turn neighbouring tiles in opposite directions for a playful feel.
Tailwind has no perspective utility in v3, so use the arbitrary property [perspective:800px] on the wrapper. Lower values give a stronger 3D effect.
Transforms as arbitrary values
hover:[transform:rotateX(8deg)_rotateY(-12deg)] writes the whole transform; underscores stand in for spaces inside arbitrary values.
Pointer tilt with custom properties
A short script writes --rx and --ry on pointer move, and one utility reads them. The styling stays in classes and the script stays tiny.
Respect reduced motion
Prefix hover transforms with motion-safe: and skip the pointer script when prefers-reduced-motion is set. Keep the hover shadow so there is still feedback.
Frequently asked questions
Do tilt cards work on phones?
Touch screens have no hover, so the cards simply stay flat, which is fine.
Which Tailwind version is used?
Tailwind CSS v3 through the Play CDN; the classes work the same in a compiled v3 project.