In what order are the transform functions applied?

Order matters in CSS because each function operates on the coordinate system left by the previous one. This tool emits translate first, then any 3D rotation, then rotate, scale, and skew, which is a stable, intuitive order for most layouts.

Why do I need perspective for 3D rotation?

rotateX and rotateY tilt an element in 3D space, but without a perspective value the result looks flat. Perspective is set on the parent element and controls how strong the foreshortening appears; smaller values exaggerate the effect.

What does scale do at values below 1?

Scale multiplies the element's size. A value of 1 leaves it unchanged, 1.5 makes it half again as large, and 0.5 shrinks it to half size. Values of 0 collapse the element entirely, so the tool keeps a small minimum.

Can I combine all the transforms at once?

Yes. Any non-default control is added to a single space-separated transform string, so you can rotate, scale, skew, and translate together. Functions left at their default value are omitted to keep the output clean.

Is the CSS generated locally?

Yes. Both the transform string and the live preview run in your browser, so nothing is sent to a server and the tool works offline.

What is the CSS Transform Generator?

Generates CSS transform property strings combining rotation, scale, skew, and translate values. Includes 3D rotateX and rotateY options with perspective and a live preview. Copy-paste code output, runs in your browser. It runs free in your browser on Gera Tools, with nothing uploaded.

CSS Transform Generator

Name: CSS Transform Generator
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

The CSS Transform Generator lets you dial in rotation, scale, skew, and translation with sliders and copies out the exact transform declaration. An optional 3D mode adds rotateX, rotateY, and a parent perspective for depth effects, all shown on a live preview box.

How it works

Each slider maps to a CSS transform function. Only controls left at a non-default value are emitted, and they are concatenated in a deliberate order:

transform: translate(Xpx, Ypx)
           rotateX(Adeg) rotateY(Bdeg)   /* 3D mode only */
           rotate(Rdeg)
           scale(S)
           skewX(Kdeg) skewY(Ldeg);

Because CSS applies transform functions left to right against the running coordinate system, putting translate first and skew last keeps the result predictable as you combine effects.

Understanding each transform function

translate(x, y): Moves the element from its current position without affecting the document flow. Unlike position: relative with top/left, translate is composited on the GPU in most browsers, making it the preferred approach for smooth animations. Translating an element does not push or pull neighboring elements.

rotate(deg): Spins the element around its transform-origin point (default: center). Positive degrees rotate clockwise. For card-flip effects and loading spinners, this is almost always the right function.

scale(value): Multiplies the element’s rendered size. A value of 1.5 grows the element to 150% of its natural size; 0.75 shrinks it to 75%. Like translate, scale does not affect layout — the space the element occupies in the document flow remains unchanged. This is why hover-grow effects (:hover { transform: scale(1.05); }) are GPU-composited and smooth without reflow.

skewX(deg) and skewY(deg): Shears the element along one axis, giving a slanted appearance. Commonly used for decorative parallelogram shapes and subtle italic-like effects on non-text elements. More than about 20 degrees starts to look distorted, especially on text.

rotateX(deg) and rotateY(deg) (3D mode): Tilts the element in 3D space around the horizontal or vertical axis. Without a perspective on the parent, the tilt is technically present but appears flat because there is no foreshortening. These functions power card-flip transitions and the tilt-on-hover effect common in interactive UI.

The perspective property

In 3D mode, perspective must be applied to the parent element, not the element being transformed. The generated code includes a comment reminding you of this, along with the specific pixel value to use.

The perspective value represents how far the viewer’s eye is from the element’s z = 0 plane. A value of 200px places the virtual viewer close, producing an extreme, dramatic tilt effect. A value of 1000px simulates a more distant viewer and a subtler perspective. For typical hover-tilt effects on cards, values between 400px and 800px look natural.

Transform origin

All transforms operate around the element’s transform-origin, which defaults to the center (50% 50%). If you want a rotation that pivots from the top-left corner (for page-turn effects) or the bottom-center (for a swinging-door effect), set transform-origin separately in your CSS. The generator uses the default center origin for its live preview.

Tips and notes

For 3D tilts, remember the perspective belongs on the parent element, not the transformed one — the tool reminds you with a comment in the output.
Smaller perspective values (around 200 to 400px) produce a dramatic, close-up tilt, while larger values flatten it.
Keep skew angles modest, since beyond roughly 30 degrees text becomes hard to read and the effect looks unintentional rather than designed.
The Reset button returns every control to its identity value so you can start a new composition quickly.
For animated transforms, will-change: transform on the element hints to the browser to promote it to its own compositor layer, improving animation smoothness on complex pages.