~/css/transform-generator
CSS Transform Generator
Move, rotate, scale and skew an element with sliders and see exactly how the functions combine. Change the transform origin to rotate around a corner instead of the centre, then copy the finished transform rule.
Using the CSS Transform Generator
Order matters
Transform functions are applied in sequence, so translate() rotate() and rotate() translate() end up in different places: rotating first turns the direction the element then moves in. The generator always writes translate, rotate, scale, then skew, the most predictable order.
Transforms do not affect layout
A transformed element keeps its original space in the page; neighbours do not move. The dashed outline in the preview shows that original position. That is why transforms are perfect for animation: they never trigger a layout recalculation.
Transform origin
Rotation and scaling happen around the transform origin, the centre by default. Set it to a corner to swing a card open like a door, or to the bottom to make an element grow upwards.
Individual transform properties
Modern CSS also has separate translate, rotate and scale properties, which can be animated independently. The combined transform property shown here works everywhere.
Combining transforms with transitions
To animate between two transforms smoothly, keep the same list of functions in the same order in both states, for example translateY(0) scale(1) to translateY(-4px) scale(1.02). If the function lists differ, the browser falls back to interpolating matrices, which can produce unexpected spinning or skewing.
Frequently asked questions
Why is my transformed element blurry?
Scaling up or translating by fractional pixels can soften text. Use whole-pixel translations and avoid scaling text-heavy elements above 1.
Can I transform in 3D?
Yes, with rotateX, rotateY and perspective. The flip card in the CSS cards collection is an example.
How do I animate a transform?
Add a transition on transform, or use the CSS animation generator to create keyframes.