CSS 3D Transforms: rotateX, rotateY, and perspective
A practical guide to CSS 3D transforms - how perspective, rotateX, rotateY, and translateZ work together, plus the gotchas that flatten your 3D effect.
7 min read - Updated 2026-06-19
CSS 3D transforms let you rotate and position elements in three-dimensional space, but they only look right when perspective is set up correctly. Here is how the pieces fit together, and why your 3D effect sometimes looks flat.
Perspective is what makes 3D look 3D
A rotateY on its own often looks like a squashed 2D element because there is no perspective to create depth. Perspective defines how far the viewer is from the z=0 plane: a smaller value exaggerates the effect, a larger value flattens it. You set it either on the parent (the perspective property) or inline as the first function in transform.
perspective: 800px on the parent applies to all 3D children together
transform: perspective(800px) rotateY(45deg) applies per element
Smaller perspective values (300-500px) create a dramatic effect
Larger values (1000px+) look subtle and realistic
The core 3D transform functions
Once perspective is in place, the rotate and translate functions move elements through 3D space. rotateX tips an element forward and back, rotateY swings it left and right like a door, rotateZ spins it in the plane, and translateZ moves it toward or away from the viewer.
rotateX(deg): tilt around the horizontal axis
rotateY(deg): swing around the vertical axis
rotateZ(deg): spin in the 2D plane (same as rotate)
translateZ(px): push toward (+) or away (-) from the viewer
transform-style: preserve-3d for nested elements
If you nest 3D-transformed elements, children are flattened into their parent's plane by default. Setting transform-style: preserve-3d on the parent keeps children in the same 3D space, which is essential for building card flips, cubes, and layered scenes.
Without preserve-3d, child transforms collapse to 2D
Set it on every ancestor that should share the 3D space
backface-visibility: hidden hides the reversed back of a flipped element
Combine with translateZ to stack faces of a cube
Why your 3D transform looks broken
Most 3D transform bugs come from a missing or misplaced perspective, a forgotten preserve-3d, or transform order. Transform functions apply in sequence, so rotate-then-translate differs from translate-then-rotate. Test the result across viewport sizes too, because a transform that looks right on desktop can clip or overflow on mobile.
No perspective set - the element looks flat
preserve-3d missing - nested faces collapse
Transform order wrong - element ends up in the wrong place
Mobile overflow - 3D elements pushing outside the viewport
Release checklist
Set perspective on the parent or inline before rotate functions.
Use transform-style: preserve-3d for any nested 3D elements.
Add backface-visibility: hidden for flip effects.
Verify the effect across phone, tablet, and desktop widths.
Frequently asked questions
How do I create a 3D effect in CSS?
Set a perspective value on the parent element (or inline as the first transform function), then apply rotateX, rotateY, or translateZ to the child. Perspective is what gives the rotation real depth instead of looking flat.
What does transform-style: preserve-3d do?
It keeps child elements in the same 3D space as their parent instead of flattening them into the parent's plane. It is required for nested 3D scenes like card flips and cubes.
Why does my CSS 3D transform look flat?
Almost always a missing perspective. Without perspective, a rotateY just looks like a horizontally squashed element. Add perspective to the parent or inline before the rotate function.
Related guides
Benji
Your life OS
The companion app that keeps every area of your world in sync.
Zero to Shipped
Ship products, not side projects
The ultimate Next.js boilerplate for building and launching real products.
DMX
Mindful Twitter/X
The intentional X client for macOS. Reclaim your attention span.
Sotto
Voice-to-text for macOS
Speak naturally. Type instantly. 100% local & private.
Passlock
Password manager with willpower
Lock passwords with time delays, word challenges, or hand the keys to someone you trust.
Glink
Changelogs that slap
Beautiful changelogs and roadmaps for your product.
JoinRepo
GitHub access control
Monetize your GitHub repositories with ease.
Tubely
YouTube Studio for Mac
Manage multiple YouTube channels in one native app.
JustWrite
Distraction-free writing
A minimal writing app that helps you focus on what matters.