Transforms in 3D
transform-origin, perspective, backface-visibility and preserve-3d — everything you need to build a flip card.
Transforms aren't limited to the flat plane. Add a little depth and you can build flip cards, cubes, and parallax tilts — all GPU-accelerated and buttery smooth.
The pieces
transform-origin— the pivot point. Rotations and scales happen around it. Default is the center; move it to a corner and watch the motion change entirely.perspective— set on the parent, it defines how strong the 3D foreshortening is. Smaller values feel more dramatic.transform-style: preserve-3d— lets children keep their own place in 3D space rather than flattening.backface-visibility: hidden— hide the mirror-image back of an element when it rotates away. Essential for flip cards.
rotateX / rotateY / rotateZ
Rotate around each axis: rotateY(180deg) spins horizontally like a page turning, rotateX tips forward and back. Combine with translateZ to push elements toward or away from the viewer.
Example
When to use it
- A developer uses perspective: 800px and rotateY(180deg) to build a flip card that reveals its back face on hover.
- A designer uses transform-origin: bottom left on a popover so it expands from the corner of the trigger button.
- A developer uses backface-visibility: hidden on both front and back faces of a 3D card to prevent both sides from showing at the same time.
More examples
3D flip card with backface-visibility
Builds a complete 3D flip card using perspective, preserve-3d, rotateY, and backface-visibility: hidden.
.flip-card { perspective: 800px; }
.flip-inner {
position: relative;
transform-style: preserve-3d;
transition: transform 0.6s ease;
}
.flip-card:hover .flip-inner {
transform: rotateY(180deg);
}
.flip-front,
.flip-back {
position: absolute; inset: 0;
backface-visibility: hidden;
}
.flip-back {
transform: rotateY(180deg);
background: #2965f1;
color: #fff;
}transform-origin for scale animation
Uses transform-origin: top left so the tooltip expands from its top-left corner (the trigger button corner).
.tooltip {
transform-origin: top left;
transform: scale(0);
transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.trigger:hover .tooltip {
transform: scale(1);
}Combining 3D transforms
Positions cube faces using translateZ and rotateY/X, demonstrating how 3D transforms compose to form a solid cube.
.cube-face {
position: absolute;
width: 100px;
height: 100px;
background: rgba(41,101,241,0.7);
backface-visibility: hidden;
}
.front { transform: translateZ(50px); }
.back { transform: rotateY(180deg) translateZ(50px); }
.right { transform: rotateY(90deg) translateZ(50px); }
.top { transform: rotateX(90deg) translateZ(50px); }
Discussion