Guides · · Maxwell Prehoda
11 3D Hover Effect Examples, From Apple TV Parallax to Holo Cards
A 3D hover effect needs two things: `perspective` on a parent, so rotations have depth, and a transform on the child, usually a small `rotateX` and `rotateY` toward the pointer plus a lift with `translateZ` or a slight scale. Smaller perspective values give a stronger, more distorted effect; 800 to 1000px looks natural on cards. The best examples add a third thing that sells the illusion: layers that move by different amounts, or a glare that slides across the surface as it turns.
Below are 11 examples to copy, from Apple's tvOS parallax rules and the JavaScript tilt libraries most sites use, to pure-CSS tilts that track the pointer with no script at all. Every entry has a live demo from our directory, and each third-party entry says when our demo is a CSS version of the idea rather than their code.
1. Apple TV layered image parallax: Best for focus states on posters, thumbnails and app icons
Platform: tvOS system effect, Apple HIG
Aurora Pass
Night tours above the Arctic Circle
Book a seatApple TV is where most people first saw a card tilt toward them. Apple's Human Interface Guidelines describe it plainly: when an element comes into focus the system elevates it to the foreground, gently sways it, and applies illumination so its surface appears to shine. A layered image has two to five layers, and as you interact, the layers closer to the surface rise and scale more, overlapping the ones behind and producing the 3D effect.
That is the whole recipe for a convincing web version: separate the artwork into a few depth layers, move the near ones further than the far ones, and add a moving highlight. tvOS app icons must use layered images, which tells you how central Apple considers the effect.
Our Layered Depth Card Hover below is a pure-CSS version: the card tilts and its contents lift at different depths, the ridge a little, the title more, the badge and button most, each with its own `translateZ`.
Watch out for: On tvOS the effect follows focus from a remote. On the web, make keyboard focus trigger it as well as hover, or keyboard users get a flat card while mouse users get the show.
2. vanilla-tilt.js: Best for cursor-following tilt with glare, no framework
Platform: JavaScript, no dependencies, MIT license
vanilla-tilt.js is the dependency-free fork of Gijs Rogé's jQuery Tilt.js and the default choice for cursor-following tilt (about 4k GitHub stars). Add `data-tilt` to an element and it rotates toward the pointer. It is about 8.5 KB minified, and its defaults are worth knowing because they are strong: `max` 35 degrees of rotation, `perspective` 1000, `speed` 300 ms for the enter and exit transition, `reset` on mouse leave, and `gyroscope` on, so phones tilt it with device orientation.
Turn on `glare` and set `max-glare` to around 0.3 for a reflection that slides across the surface. That one option does more for realism than any amount of extra rotation.
Our Cursor Tilt Card Hover below does the same thing without JavaScript: a 3x3 grid of invisible cells sets the tilt, so it tracks the pointer in nine steps and a glare follows.
Watch out for: 35 degrees is far too much for most product cards. Start at 8 to 12, and set gyroscope to false unless you want cards moving while people scroll on their phones.
3. Atropos by nolimits4web: Best for touch-friendly multi-layer parallax cards
Platform: JavaScript, React or Web Component, about 2 KB, MIT
Serra da Estrela
Three ridge walks above the clouds
Atropos is a free, open source library for touch-friendly 3D parallax hover effects from nolimits4web, the developer behind Swiper. It uses pointer events, so the same code responds to a mouse and a finger, has no dependencies and is about 2 KB minified and gzipped. It ships for plain JavaScript, React, and as a Web Component for Vue, Svelte, Angular, Solid and the rest.
Its strength is layering. Where a basic tilt rotates one flat card, Atropos is built for compositions where the background, the subject and the text move at different depths, which is the Apple TV effect done properly on the web.
Our Parallax Card Hover below shows the layered idea in CSS: a landscape split into layers that slide at different speeds, the sun rising, the far ridge barely moving and the near hills sweeping past.
Watch out for: Responding to touch means the card moves while people try to scroll past it. Test on a phone, and limit the effect to cards that are meant to be explored, not every item in a list.
4. react-parallax-tilt: Best for React apps that want tilt, glare and flip in one prop list
Platform: React, 2.9 KB, zero dependencies, MIT
Weekend in Lisbon
Three days of tiles, tarts and trams.
react-parallax-tilt wraps the same effect as a React component at 2.9 KB with no dependencies. Glare is opt-in with `glareEnable` and configurable for colour, position, opacity and border radius. `scale` enlarges the element on hover (1 by default), `tiltReverse` flips the direction, and `flipVertically` and `flipHorizontally` turn the component over on either axis.
Its gyroscope support is marked experimental, needs a secure origin, and on iOS 13 and later needs a user interaction to grant permission, which is a useful reminder that motion sensors on the web are permission-gated.
Our 3D Tilt Card below is the zero-JavaScript baseline: the card tips back and to the side as if pushed at one corner. It does not follow the cursor, and for a grid of cards it often does not need to.
Watch out for: Each tilting card attaches pointer listeners and re-renders transforms. In a long React list, use one shared listener or a CSS approach instead of a component per card.
5. Simon Goellner's Pokémon holo cards: Best for collectible, trading card and premium tier cards
Platform: Svelte + CSS demo, GPL-3.0; hover-tilt component MIT
•••• •••• •••• 2046
Simon Goellner's Pokémon Cards CSS project is the most famous 3D hover demo of recent years (over 8k GitHub stars). It recreates the holofoil cards of the Sword and Shield era with CSS transforms, gradients, blend modes and filters, applied with Svelte, so each card tilts toward the pointer while a foil pattern shifts underneath a moving glare. Bradley Kouchi's 2022 CSS-Tricks article breaks down how combinations of filter, background-blend-mode, mix-blend-mode and clip-path produce each holo style.
Goellner has since published hover-tilt, a tilt and glare component for Svelte 5 that also ships as a Web Component for React, Vue or plain HTML, which is the practical way to get the feel without lifting the demo.
Our Glass Credit Card below borrows the same two ingredients in pure CSS: a slow 3D tilt and a holographic sheen sliding across a frosted card.
Watch out for: The cards repository is GPL-3.0, so copying its code into a closed-source product has license consequences. Use the MIT hover-tilt component or write your own.
6. daisyUI Hover 3D: Best for Tailwind projects that want tilt without JavaScript
Platform: Tailwind CSS plugin, CSS only
daisyUI's `hover-3d` wrapper tilts its content toward the pointer with CSS alone. You put your content inside, followed by eight empty divs, and those divs become eight hover zones over the card, each applying a slight rotation for the region the cursor is in. It is the same trick as invisible hit areas in our own pure-CSS tilts.
Zones give you stepped tracking rather than continuous, but at small rotation angles the steps are hard to see, and you avoid every cost of a script: no listeners, no layout reads, no hydration.
Our 3D Press Tilt Button below applies the idea to a press instead of a hover: nine invisible zones sit over the face and each `:active` zone tips the button toward where you pressed.
Watch out for: daisyUI's docs say to put only non-interactive content inside hover-3d, because the zones sit on top. If the whole card should be clickable, make the wrapper itself the link.
7. David DeSandro's Intro to CSS 3D transforms: Best for learning flips, cubes and carousels properly
Platform: Free tutorial, text CC-BY, code MIT
Design
Hover to flip
Details
Figma, tokens, motion.
Before reaching for a library, read David DeSandro's tutorial. It walks through perspective, the 3D transform functions, and then four builds that cover nearly every 3D hover you will see: a card flip, a cube, a box and a carousel. The text is CC-BY and the example code is MIT.
The card flip chapter is the one to start with. Two faces stack inside a wrapper with `transform-style: preserve-3d`, the back face starts rotated 180 degrees, `backface-visibility: hidden` hides whichever side faces away, and hovering rotates the wrapper. Everything else is a variation on that structure.
Our Flip Card below is that exact structure, ready to copy: front and back faces with backface-visibility hidden inside a 3D-preserving wrapper.
Watch out for: A flip hides the front entirely, so anything on it disappears on hover. Never put the only copy of important information on the back face, and make the flip work on focus for keyboard users.
8. MDN perspective and the depth budget: Best for tuning how strong a 3D effect looks
Platform: CSS reference, all modern browsers
Weekend in Lisbon
Three days of tiles, tarts and trams.
MDN's perspective page is short and explains the one number that decides whether a 3D hover looks elegant or broken. `perspective` sets the distance between the viewer and the z=0 plane: smaller values give a stronger effect, larger ones a subtler one, and the vanishing point defaults to the centre unless you move it with `perspective-origin`. It applies to the element's children, not to the element itself.
Two side effects catch people out: any value other than none creates a stacking context, and it becomes the containing block for `position: fixed` descendants. That is why a tooltip or menu inside a 3D card can suddenly be clipped or mispositioned.
Our Stand Up Card Hover below shows how much a hinge adds: the card rests tipped back as if lying on a desk and stands up to face you, hinged on its bottom edge.
Watch out for: Parts of a 3D element that end up behind the viewer (z greater than the perspective distance) are not drawn at all. Large rotations with small perspective values can make a card vanish mid-hover.
10. Our Isometric Card Hover: Best for feature grids with a physical, product-shot feel
Platform: Motions directory, free, pure CSS Ours
A card laid out in isometric view with visible thickness. On hover it floats up off the surface while its shadow slides away and softens. It has real side faces, so the slab keeps its depth at any size instead of relying on a shadow to fake it.
Isometric cards suit feature sections and integrations pages where you want the grid to feel like objects on a desk. Pair it with our Hairline Animations for isometric line art in the same angle.
Watch out for: Isometric layouts rotate the reading line. Keep long text off the slab itself and put it below, flat and readable.
11. Our Push In Card Hover: Best for pressable tiles and selectable options
Platform: Motions directory, free, pure CSS Ours
The opposite of a lift: the card sinks into a slot in the page on hover, and the slot's four inner walls come into view around it. The walls are real planes behind the card, so the depth holds at any size.
Sinking reads as pressable, which makes it a good fit for option tiles, category pickers and anything that behaves more like a button than a link. Browse the 3D Hover Effects collection for the full set of tilts, flips, folds and lifts.
Watch out for: A sinking hover and a sinking press look the same. Give the active or selected state its own clear signal, such as a border or check, so people can tell hover from selection.
How to choose a 3D hover effect
Match it to the content
Rich artwork (posters, product shots, collectibles) suits layered parallax like Apple TV's or Atropos, with a glare. Plain cards with text suit a gentle tilt of 8 to 12 degrees, as in our Cursor Tilt Card. Two pieces of information suit a flip or a cube (Flip Card, Cube Flip Button). Pressable options suit a sink like Push In.
Match it to your stack
No JavaScript: hover zones (daisyUI's eight, our nine) or fixed-direction tilts, all with perspective on the parent. Vanilla JavaScript: vanilla-tilt.js, or Atropos if you need touch and layers. React: react-parallax-tilt, Atropos React or hover-tilt's Web Component. Check licenses before copying showcase code: the Pokémon cards repository is GPL-3.0.
Match it to the device
Hover does not exist on touch screens, and gyroscope tilt moves cards while people scroll, so design the resting state to look finished on its own. Trigger the effect on keyboard focus too, keep rotations small, and under prefers-reduced-motion drop the tilt and keep a simple lift or shadow change.
Add depth to one card grid this week
Pick your most important card grid, set `perspective: 900px` on the grid, and on hover and focus give each card `rotateX(4deg) rotateY(-6deg) translateZ(12px)` with a 200 to 300 ms ease-out. Add a soft highlight gradient that moves the opposite way. If it still feels flat, split the artwork into two or three layers and move them by different amounts.
Copy any of the demos above from the 3D Hover Effects collection, or describe the effect you want and get production-ready CSS from the creator. For flatter card treatments see our card hover effect examples.
Make a pure CSS 3D hover effect for a product card grid. Set perspective: 900px on the grid; on hover and focus-visible, tilt the card toward the pointer using a 3x3 grid of invisible zones, max 10 degrees, with a 250 ms ease-out. Lift the title and image by different translateZ amounts for parallax, and slide a soft glare across the surface. Keep links inside the card clickable. Under prefers-reduced-motion, replace the tilt with a 4px lift and a stronger shadow.
Common questions
How do you make a 3D hover effect with CSS only?
Set perspective on the parent (around 800 to 1000px), add transform-style: preserve-3d to the card if it has layers, and on :hover and :focus-visible apply a small rotateX and rotateY plus translateZ. To follow the pointer without JavaScript, overlay a grid of invisible zones and set the rotation from whichever zone is hovered, the way daisyUI's hover-3d and our cursor tilt card do.
What is the best library for 3D tilt on hover?
vanilla-tilt.js for plain JavaScript with glare (about 8.5 KB, MIT). Atropos for touch-friendly multi-layer parallax (about 2 KB gzipped, MIT, with React and Web Component versions). react-parallax-tilt for React (2.9 KB, MIT). For a holographic card look, Simon Goellner's hover-tilt component (MIT) for Svelte 5 or as a Web Component.
How does the Apple TV hover effect work?
tvOS uses layered images of two to five layers. When an item gets focus, the system lifts it to the foreground, sways it gently and adds an illumination that makes the surface shine. Layers nearer the surface rise and scale more than the ones behind, which creates the depth. On the web you reproduce it with stacked layers at different translateZ values and a moving highlight.
Why does my 3D card look flat?
Usually perspective is missing or on the wrong element. It must be on the parent (or as perspective() inside the card's own transform), not just on the card. Also check that a parent with overflow: hidden or a filter is not flattening the 3D context, and that the rotation is large enough to notice at your perspective value.
Do 3D hover effects work on mobile?
Hover-triggered effects do not fire on touch screens. Libraries like Atropos respond to touch through pointer events, and vanilla-tilt.js and react-parallax-tilt can use the gyroscope, which needs a secure origin and on iOS a permission prompt. Make sure the card looks complete without any effect.