CSS Transform Generator
Drag the sliders for translate, rotate, scale, and skew and watch the preview box transform live. Toggle 3D mode to add perspective and rotateX/Y for card-flip and prism effects.
How to Use
Each slider transforms the preview box instantly. A reset button on each transform jumps back to the no-op default.
Move the rotation/scale anchor as X% / Y%. 50% 50% (center) is the default; switch to 0% 0% for top-left, 100% 100% for bottom-right, etc.
Toggle '3D mode' to enable perspective (px), rotateX, rotateY, and translateZ. Great for card flips, fold-outs, and isometric effects.
FAQ
Why use transform: translate over position offsets?
transform: translate is GPU-accelerated and smooth; position: absolute's left/top forces layout recalculation. Always animate with transform when possible.
Should rotate use deg, turn, or rad?
This tool outputs deg — most intuitive and broadly compatible. turn (1turn = 360deg) and rad (2π rad = 360deg) work identically.
What about negative scale?
Negative scale flips: scaleX(-1) is horizontal mirror, scaleY(-1) is vertical mirror. Negative values are allowed by the sliders here.
I can't see 3D effects
3D effects require a parent with perspective. This tool applies perspective directly to the preview stage so the child box shows depth correctly.
Is anything sent to a server?
No. Everything runs in your browser; the generated CSS never leaves the page.
