CSS Transform Generator
Generate CSS transform values: translate, rotate, scale, skew plus 3D perspective, rotateX/rotateY and translateZ, with transform-origin and live preview.
Presets
2D transforms
3D transforms
Perspective 0 means none. 3D rotations look flat without perspective.
Transform origin
Preview
The dashed outline shows the untransformed element; the red dot is the transform origin.
transform: none;
Related Tools
View AllWhat is CSS Transform Generator?
Combines CSS transform functions with sliders: 2D translate, rotate, scale and skew, and 3D perspective, rotateX, rotateY and translateZ. A dashed outline in the preview shows the original position and a red dot marks the transform origin.
How to use CSS Transform Generator
- Pick a preset (3D tilt, Flip, Slanted, Zoom, 3D card) or start from None.
- Adjust Move X/Y, Rotate, Scale X/Y and Skew X/Y under 2D transforms.
- Set Perspective, Rotate X, Rotate Y and Move Z under 3D transforms.
- Choose the Transform origin from the list or set Position X/Y.
- Copy the CSS code.
Example
Move X 20px, Rotate 45°, Scale X 1.5, Scale Y 1.5
transform: translate(20px, 0) rotate(45deg) scale(1.5);
When to use CSS Transform Generator
Use it for hover effects, card flips, tilted 3D showcases and precise positioning offsets. Transforms do not affect layout (surrounding elements do not move); to change layout use margins, flexbox or grid. Combine with the CSS Animation Generator to animate between transforms.
How CSS Transform Generator works
Functions are written only when they are not neutral, in this order: perspective(), translate(), translateZ(), rotateX(), rotateY(), rotate(), scale(), skew(). Transforms are applied right to left relative to the element, so order changes the result; perspective() must come first to affect the 3D functions after it. Equal X/Y scale is written as a single scale(n). transform-origin is only output when it differs from the default centre (50% 50%).
Common Use Cases
- 3D tilted product cards
- Card flip effects with rotateY(180deg)
- Hover zoom on images
- Slanted section labels with skew
- Centring tricks with translate(-50%, -50%)
FAQs
What is the difference between perspective() and the perspective property?
perspective() inside transform applies to that element only. The perspective property on a parent creates a shared 3D space for all its children.
Why does my 3D rotation look flat?
Without perspective there is no depth foreshortening. Set Perspective to a value like 800px.
Does transform affect layout?
No. The element keeps its original space in the layout; only its rendering is moved, rotated or scaled.