What Is CSS Transform?

The transform property lets you visually move, rotate, resize, and skew elements without disrupting document flow. Transforms are GPU-accelerated and animation-friendly — a cornerstone of modern UI effects.

CSS Transform Generator

Use the sliders below to compose a transform in real time. Hit Copy CSS when you are ready.

Presets:

Translate
0px
0px
Rotate
0deg
Scale
1.00
1.00
Skew
0deg
0deg
Perspective
600px
Live Preview
Box
Generated CSS
transform: none;

Transform Functions Explained

FunctionSyntaxDescription
translate()translate(x, y)Move element along X and Y axes
rotate()rotate(deg)Rotate clockwise (positive) or counter-clockwise (negative)
scale()scale(x, y)Resize element; 1 = original, -1 = flip
skew()skew(xdeg, ydeg)Tilt element along each axis
perspective()perspective(px)Add 3D depth for child transforms

Multiple Transforms — Order Matters

Transforms are applied right to left. translate(50px, 0) rotate(45deg) first rotates then moves, producing a different result than the reversed order.

Performance Tips

  • Use transform (and opacity) for animations — they skip layout and paint steps.
  • Add will-change: transform on elements that animate frequently.
  • Avoid transform on elements that are rarely updated — will-change reserves GPU memory.

3D Transforms Quick Reference

/* Parent sets the 3D space */
.container {
perspective: 600px;
}

/* Child uses 3D functions */
.card {
transform: rotateY(30deg) rotateX(10deg);
transform-style: preserve-3d;
backface-visibility: hidden;
}