CSS Transform Generator
Build complex CSS transforms visually — translate, rotate, scale, skew, and perspective on X/Y/Z axes. Live 3D cube preview, copy-ready CSS, and one-click presets.
About this tool
This generator builds the CSS transform property by combining translate, rotate, scale, and skew across the X/Y/Z axes. Drag the sliders and a 3D cube previews the result live; the finished CSS appears ready to copy.
Example: set Rotate Y to 45° and Perspective to 800px and the tool outputs transform: rotateY(45deg) on the element plus perspective: 800px on the parent — the exact pairing the browser needs for a real 3D effect.
Only non-default functions are emitted, so a plain element with no rotation produces transform: none. Presets like Tilt Card, Flip H, and 3D Spin give instant starting points for hover effects and card animations.
FAQ
Why is perspective on the parent and not the element? ›
CSS perspective must be set on the ancestor of the transformed element (or via the transform-function perspective() on the element itself). The generator outputs both: perspective on .parent and the transform on .element, so copy-pasting both rules gives the correct 3D depth.
What does transform-origin do? ›
It sets the pivot point the element rotates and scales around. The default is the center; choosing "top left" makes rotations swing from the corner. The 3×3 grid in the Scene panel sets it visually.
Can I combine rotateX and rotateY for a real 3D tilt? ›
Yes — setting both produces a combined tilt, and with perspective on the parent the cube visibly rotates in 3D space. The "Tilt Card" and "3D Spin" presets demonstrate this.
Can I animate these transforms over time? ›
Yes. The <a href="/css-animation">CSS Animation Generator</a> has a custom keyframe editor where you can add translate, rotate, scale, and skew values to keyframes — combine this tool to design the transform and the Animation Generator to control timing, iteration, and easing.