Also called Rotating ring carousel
Panels arranged in a ring rotate around a vertical axis in 3D space.
Use for
Gallery and product showcases
Add a "3D Carousel" (also called a rotating ring carousel) to [where].
Arrange the panels in a ring seen in perspective; each press of next should turn the whole ring smoothly around its vertical axis to bring the following panel to the front.
Make the controls reachable by keyboard and announce the current panel to screen readers, and switch to a plain fade for users who prefer reduced motion.
Also called Interactive globe
A rotating 3D Earth with markers or arcs sits in the layout.
Use for
Global reach visuals
Add a "3D Globe" (also called an interactive globe) to [where].
A globe with a few markers on its surface should turn slowly and steadily around its axis, with the markers going round with it: calm and continuous.
Keep it decorative with a text alternative for the information it shows, pause it when off screen, and stop the rotation for users who prefer reduced motion.
A card tilts back in perspective on hover while a pin and glow rise toward the viewer.
Use for
Link preview cards
Add a "3D Pin" hover effect (also called pin hover 3D) to [where].
When the pointer is over the card, it should tilt back in perspective while a pin with a soft glow at its base rises up from its center; everything settles back when the pointer leaves: smooth, not bouncy.
Keep the card's space in the layout unchanged, and show the same effect on keyboard focus.
Also called Perspective tilt, 3D card effect, Tilt card, Tilt on hover, Parallax tilt
A card rotates in perspective toward the pointer, with layered content lifting off the surface.
Use for
Product and pricing cards
Add a "3D Tilt" effect (also called a perspective tilt or tilt card) to [where].
The card should lean in perspective toward the pointer as it moves, with its inner layers lifting off the surface at different depths, and ease back flat when the pointer leaves: smooth and subtle.
Keep the tilt gentle so text stays readable, and leave the card flat on touch devices and for users who prefer reduced motion.
Also called Flip card, Card flip 3D, 3D flip on hover
A card rotates 180 degrees around an axis to reveal its back face.
Use for
Team cards, flash cards, pricing details
Add a "Card Flip" effect (also called a flip card or card flip 3D) to [where].
When the pointer is over the card, it should turn over around its vertical axis in perspective to show its back face, and turn back when the pointer leaves: smooth and steady.
Hide each face's back side so the two never show through each other, and make the flip work on keyboard focus and with a tap on touch devices.
Also called Stacked cards, Cards effect
Cards pile with slight offsets and the top card moves away to reveal the next.
Use for
Testimonials, swipe decks
Add a "Card Stack" (also called stacked cards) to [where].
Pile the cards with slight offsets behind one another; each press should swing the top card away to the side and tuck it in at the back, while the rest step forward: smooth with a light, quick feel.
Make it work by keyboard, let screen readers reach every card in order, and use a simple fade for users who prefer reduced motion.
Also called Cover flow carousel
A center item faces forward while side items angle away in perspective.
Use for
Album and media carousels
Add a "Coverflow" carousel (also called a cover flow carousel) to [where].
The center item should face forward while the items on each side turn away in perspective; dragging sideways slides the row, and on release it settles smoothly on the nearest item.
Support arrow keys and swipes as well as dragging, and keep vertical page scrolling working on touch devices.
Also called 3D cube, Cube transition
Content sits on the faces of a cube that rotates to show the next face.
Use for
Slider transition, feature switcher
Add a "Cube Rotate" transition (also called a 3D cube or cube transition) to [where].
Place the content on the side faces of a cube seen in perspective; each press of next should turn the cube smoothly around its vertical axis to bring the next face to the front.
Keep only the front face reachable by keyboard and screen readers, and use a plain fade for users who prefer reduced motion.
Also called Glare hover, Glare card, Magic card, Glare
A bright highlight follows the pointer across a card surface like a reflection.
Use for
Premium or collectible cards
Add a "Glare / Holographic Card" effect (also called a glare card or glare hover) to [where].
A soft bright highlight should follow the pointer across the card surface like light reflecting off it, while the card leans slightly toward the pointer; both fade away when the pointer leaves: smooth and subtle.
Let clicks pass through the glare layer, keep the content readable under it, and show the card without glare on touch devices.