What does the CSS transform property actually do?

The CSS transform property changes the shape, size, or position of an element without affecting the normal flow of the page around it. It covers moving an element (translate), turning it (rotate), resizing it (scale), slanting it (skew), and adding depth (perspective and 3D rotation).

Does using CSS transform hurt page performance?

Generally no — transform and opacity are the two CSS properties browsers can animate on the GPU without recalculating page layout, which makes them the most performance-friendly way to move or animate elements compared to changing properties like top, left, width or margin.

Do I need vendor prefixes for CSS transform today?

No. Modern browsers — Chrome, Firefox, Safari and Edge — have supported the unprefixed transform property for years. You only need -webkit- prefixes if you specifically have to support very old mobile browsers.

What's the difference between transform and transition?

Transform describes the end state you want — how an element should be moved, rotated, scaled or skewed. Transition describes how the change between two states happens over time. You typically pair the two: transform defines the look, transition defines the motion.

Why doesn't my rotateX or rotateY look 3D?

3D rotation needs a perspective value on the element or its parent, otherwise the browser has no vanishing point to render depth and the rotation looks flat. Lower perspective values create a more dramatic, closer 3D effect; higher values look more subtle — try adjusting it in the Depth tab above.

Free & runs entirely in your browser

The CSS Transform Generator that turns dragging sliders into clean, copy‑ready code

Stop hand-writing translate3d() and guessing rotation angles. Move a few sliders, watch the preview update in real time, and copy CSS you can paste straight into your stylesheet — no build tools, no sign-up, nothing to install.

Start transforming

Learn the basics first

No account needed

Works on mobile

Free

Runs in your browser

Keyboard & screen-reader friendly