Tools

3D Transform Playground

Give a flat element depth with perspective and 3D rotation: the tilt behind modern card hovers and hero mockups. Tune it live, copy the CSS. Nothing uploaded.

Tilt me

perspective + rotate

Perspective 800px

Rotate X -14deg

Rotate Y 22deg

Rotate Z 0deg

Translate Z 0px

Tilt toward cursor

CSS

About 3D transforms

Two pieces make 3D work in CSS. perspective sets how strong the depth feels: a small value (400px) is dramatic and fish-eyed, a large one (1500px) is subtle. Then rotateX, rotateY and translateZ move the element through that space.

The common pattern is a card that tilts toward the cursor on hover (try the toggle above). Set perspective on the parent, transform the child, and add transform-style: preserve-3d if you nest layers. Pair it with a shadow that shifts with the tilt for a convincing lift.