CSS Transform Generator
NEWCompose CSS transforms with sliders — translate, scale, rotate, skew and full 3D — and copy the transform property.
2D transforms
3D transforms
Preview
CSS
How to use CSS Transform Generator
- Adjust the 2D sliders for translate, scale, rotate and skew.
- Pick a transform-origin to change the pivot point.
- Open the 3D section to set rotateX/Y/Z, translateZ and a parent perspective.
- Click Copy CSS to grab the transform declaration.
What is CSS Transform Generator?
The CSS Transform Generator builds the transform property visually. Use the 2D sliders for translateX/Y, scaleX/Y, rotate and skewX/Y, set the transform-origin, then drop into the 3D section for rotateX, rotateY, rotateZ, translateZ and a parent perspective.
A gridded preview box with a labelled element shows the result in real time, so you can see exactly how each function stacks. The order of functions matters in CSS, and the generated declaration keeps a sensible, predictable order for you.
Everything runs in your browser. Copy the resulting transform line — along with any transform-origin and perspective rules — and paste it into your stylesheet.
FAQ
- Why does the order of transform functions matter?
- CSS applies transform functions left to right, so rotating then translating gives a different result than translating then rotating. The generator outputs them in a consistent order; adjust your CSS if you need a specific sequence.
- Why is perspective on the parent and not the box?
- For 3D rotations to look correct, perspective is usually set on the parent (the element containing the transformed box). The tool applies it to the preview stage and notes this in the generated CSS comment.
Related tools
People also use
- Cubic Bezier Generator🗄️ Developer Tools
Design CSS cubic-bezier easing curves with a draggable editor, presets, and a live animation preview. Copy the timing-function CSS, all in your browser.
- Keyframes Animation Generator🗄️ Developer Tools
Build CSS @keyframes animations — fade, slide, bounce, pulse, spin, flip, zoom — tune duration, easing, delay and loop, preview live and copy the CSS.
- Border Radius Generator🗄️ Developer Tools
Visually craft CSS border-radius — independent corners, px/%/em units, and organic blob shapes. Live preview and copy-paste CSS. Runs in your browser.
Last updated: