Perspective
Also called CSS perspective
A CSS property that sets how far the viewer sits from a 3D scene, so rotated elements look deep up close and flatter from far away.
const features = [
{ title: 'Live preview', text: 'See each change the moment it lands.' },
{ title: 'One-click publish', text: 'Ship to your own domain in seconds.' },
{ title: 'Data browser', text: 'Browse and edit rows without SQL.' }
];
export function FeatureGrid() {
return (
// perspective on the parent gives every card one shared vanishing point.
<div className='grid gap-4 perspective-[900px] sm:grid-cols-3'>
{features.map((feature) => (
<article
key={feature.title}
// Tailwind's hover: only applies on devices that can hover, so touch skips the tilt.
className='rounded-2xl border bg-background p-6 shadow-sm transition-transform duration-300 ease-out motion-safe:hover:-rotate-y-12'
>
<h3 className='font-semibold'>{feature.title}</h3>
<p className='mt-1 text-sm text-muted-foreground'>{feature.text}</p>
</article>
))}
</div>
);
}Make the feature cards tilt in 3D on hover: put perspective: 900px on the grid so every card shares one vanishing point, then rotate the hovered card with rotateY(-12deg) over 300ms with an ease-out curve. Skip the tilt on touch devices and when prefers-reduced-motion is set.
Paste into Layerwise or any AI coding tool.
What is Perspective?
Without perspective, rotateY(50deg) just squeezes an element horizontally and it looks flat. perspective: 800px on the parent places a virtual viewer 800px from the screen: the edge that turns toward you grows and the far edge shrinks. Smaller values put the viewer closer and exaggerate the depth; larger values make it subtler.
There are two ways to add it. The perspective property on a parent gives all of its children one shared vanishing point, so a row of tilted cards looks like one scene. The perspective() function inside an element's own transform gives just that element its own, and it must come before the rotation in the list. perspective-origin moves the vanishing point.
Values between 600 and 1200px feel natural for cards and flips; 200 to 400px looks dramatic and distorted. If a 3D rotation looks flat, a missing perspective is usually the reason.
Related terms
All terms3D flip
A card that turns over in 3D to reveal a second face on its back, built with `rotateY` and `backface-visibility: hidden`.
3D tilt card
A card that tips in 3D as the mouse moves over it, often with a moving glare, so it feels like a physical object in your hand.
Rotate
A CSS transform that turns an element around its transform origin by an angle, such as `rotate(45deg)`.
Parallax scrolling
A scroll effect where background layers move slower than the foreground, which creates a sense of depth as the page scrolls.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.
