CSS transform Builder
Visually build a CSS transform shorthand.
Overview
The CSS transform Builder visually composes a transform: shorthand from translate, rotate, scale, skew, and matrix functions, with a live preview on a sample element. Adjust each function with sliders, see the order-dependent results, and copy the combined declaration.
Useful for designers and developers learning how to combine CSS transforms in the right order or how to rotate and translate an element together. Reach for it for hover effects, card-flip animations, fixed-aspect badges, and the slide-in motion common in landing pages.
How it works
transform accepts a space-separated list of transform functions evaluated right-to-left in terms of effect on the element's coordinate system. translate() then rotate() rotates an already-moved element, while rotate() then translate() translates along the rotated axis — order matters and the preview makes it obvious.
The CSS Transforms Module Level 2 introduced individual properties (translate, rotate, scale) that animate independently and merge into the final transform — handy for combining a static layout offset with a hover scale.
Examples
- Lift on hover →
transform: translateY(-2px) scale(1.02);. - Card flip back face →
transform: rotateY(180deg);. - Centred absolutely positioned element →
transform: translate(-50%, -50%);aftertop: 50%; left: 50%. - Rotated badge →
transform: rotate(-12deg);.
FAQ
Why does order matter?
Transforms compose by multiplying matrices, and matrix multiplication is non-commutative. rotate then translate moves along the rotated axes; translate then rotate rotates around the new origin.
transform vs top/left positioning?
transform does not trigger layout — it runs on the GPU compositor and is suitable for 60fps animation. Animating top/left forces layout on every frame.
Why doesn't transform work on inline elements?
Transforms apply to block, inline-block, and table cells. A plain <span> needs display: inline-block first.
Can I 3D-transform without a perspective?
You can, but the rotation looks flat. Add perspective: 600px on the parent (or perspective(600px) inside the transform) to get the foreshortening that makes 3D look real.