Skip to content
UI Kit
Accent color

3D card effects and surfaces

Devices, cards and stages in real CSS perspective. They lean toward the pointer, turn over, fan out and stack in depth, with a calm still picture for every visitor.

6 components · 28 variants
Switch category

Depth that answers the pointer

A 3D surface gives a flat page one object that reacts. The six components here use real CSS perspective instead of WebGL, so text stays selectable, links stay clickable and the page stays light. On touch screens and with reduced motion they rest at a calm still angle, and keyboard focus lifts them just like the pointer does.

Device in 3D puts your live content into a phone, tablet, laptop or browser window with an edge and a back, and the laptop lid opens as it scrolls into view. Tilt cards lean like glass toward the pointer, for features, products, portraits with foil, plans or an event ticket. Card stacks in 3D arrange cards as a fan, a deck, a cascade of windows, a ring or a drum, all usable with arrow keys. Flip cards turn to their back for a team, myth or fact, products, numbers or a gift voucher. The isometric stage lifts a product apart into its layers, depth layers fan a picture out into named layers.

Pick one 3D surface per screen, as the single eye catcher it has the most pull. Device in 3D and the isometric stage carry a product story, tilt and flip cards suit grids of equal items. Keep the important text on the card itself, so it reads at a glance before anything moves.

On this page

Every component of this category. Pick one to jump to its variants.

card-stack-3d

Card stacks in 3D

Cards arranged in real depth, a fan in a hand, a deck to deal from, a cascade of windows, a turning ring and a drum to flip through. Live HTML on every card, arrow keys everywhere, the ring pauses on hover and focus.

Props and details · Card stacks in 3D

Fan in the handNew in 1.2

Cards held as a fan, tipped back into the room. The card under the pointer or focus lifts out, the whole fan leans with the mouse.

Deck of quotesNew in 1.2

Quotes stacked in depth. Next sends the front card down and away, it joins the back of the deck. Arrow keys deal as well, a live region names the card.

Cascade of windowsNew in 1.2

App windows cascading into the room. A tab list beside them brings one to the front, the others step back and fade into the page.

Ring carouselNew in 1.2

Cards on a ring that turns in space, one step every few seconds while on screen. It stops on hover and focus, a pause button stops it for good.

Drum to flip throughNew in 1.2

Steps on a drum that turns upward like an index box. Buttons, the numbers and the up and down keys move it, the neighbours stay in view.

device-3d

Device in 3D

A phone, tablet, laptop or browser window in real CSS perspective, with an edge and a back. It rests at a camera angle, leans toward the pointer and floats gently while on screen, your content stays live inside.

Props and details · Device in 3D

Phone beside the textNew in 1.2

A phone turned toward the text, with a visible metal edge. It follows the mouse a few degrees and floats while it is on screen.

Laptop that opensNew in 1.2

A laptop with a deck and a keyboard seen from above. The lid opens on its hinge when the laptop scrolls into view, the dashboard inside is live.

Tablet on the deskNew in 1.2

A tablet lying on a desk at an angle, with its edge in view and a broad shadow below. Calm enough to carry a whole section beside it.

Browser window in spaceNew in 1.2

A browser window with a thin edge, turned to the left like a glass panel. The page inside renders at desktop width and stays clickable.

Camera anglesNew in 1.2

Buttons under the phone turn it to five angles, the back included. A radio group, arrow keys move between the angles.

flip-card

Flip cards

Cards with a front and a back that turn over in 3D, on hover, click, tap or with the keyboard. The hidden side is inert, both sides share one cell so nothing jumps, and reduced motion cross fades.

Props and details · Flip cards

Team that turns aroundNew in 1.2

Portraits that turn to a short bio and a contact link on hover. A tap or Enter turns them too, Escape turns them back.

Myth or factNew in 1.2

Questions that turn to their answer on a click, marked as myth or fact. Good for objections, a quiz or an FAQ that invites play.

Products with detailsNew in 1.2

A picture with name and price turns to its details, a short spec list and the button. The card keeps its size, the grid below stays still.

Numbers that flip upNew in 1.2

Big numbers that flip upward on a click to what stands behind them. The upward turn reads like a board at a station.

Gift voucherNew in 1.2

One large voucher in the accent. A click turns it to the code and three steps to redeem, the turn button stays in its corner.

tilt-card

Tilt cards

Cards that lean toward the pointer like glass, with a light that follows and contents floating at their own depth. Focus lifts them too, on touch screens and with reduced motion they lie flat and calm.

Props and details · Tilt cards

Feature cards in depthNew in 1.2

Icon, title and text float on three depths above the card while it leans. The whole card is a link, a soft accent light follows the pointer.

Products rising outNew in 1.2

The product picture rises out of its card while it leans, the badge floats highest. Name, price and an add button sit on the card itself.

Portraits with foilNew in 1.2

Team cards with a foil sheen in the accent that turns with the light. Name and role float above the portrait while the card leans.

Plans in depthNew in 1.2

Three plans, the recommended one stands forward and leans less. The price floats above every card, the button stays on it.

Event ticketNew in 1.2

One ticket in the accent with a perforated stub and a code, leaning stronger than a card. The text and the booking button stand beside it.

depth-layers

Depth layers

A picture that comes apart into its layers on hover, focus, a button or the scroll. Every layer keeps its name in real text beside it, without JavaScript the fan still opens on hover.

Props and details · Depth layers

Interface fanned outNew in 1.2

A product card fans out sideways into picture, panel, content and action on hover. The legend lifts one layer, a button opens the fan on touch screens.

Layers on scrollNew in 1.2

The same card turns and comes apart while the section scrolls into the middle of the window, and stays apart. Without JavaScript it rests apart.

Diorama windowNew in 1.2

A landscape in four depth planes behind a window, tinted in the accent. The scene leans with the mouse and the planes shift against each other, the card stands in front on a solid surface.

Element inspectorNew in 1.2

One element turned to the side and taken apart, shadow, surface, border, content and focus ring. Good for a design system or a guide to good components.

isometric-stage

Isometric stage

A product or system drawn as plates in an isometric room, lifted apart into its layers. A legend beside it lifts one plate on hover or focus, a button puts the stage together and takes it apart.

Props and details · Isometric stage

Dashboard taken apartNew in 1.2

A dashboard in five layers, window, navigation, figures, chart and a note, lifted apart as it scrolls into view.

System stackNew in 1.2

Four equal plates stacked like floors, a system from the interface down to its infrastructure. The legend reads from top to bottom.

Page in sectionsNew in 1.2

The sections of a website, from navigation to footer, lifted apart. Put together they form one page, good for a site builder or an agency.

Workflow on a floorNew in 1.2

Four steps standing on a floor, joined by a path a signal runs along while the stage is on screen. Pointing at a step lifts its block.

Similar components

More from Visuals, the same area of the kit.

Often combined with

Sections that usually sit next to 3D surfaces on a page.

Often searched

Jump to

Copied to the clipboard