Free tool No sign-up

CSS Transform Generator

Stack 2D and 3D CSS transforms visually — translate, rotate, scale, skew, perspective and origin — with a live preview, ghost reference, and copy-on-click CSS.

transformcssgenerator3danimation

Presets

Translate

X0px

Y0px

Z0px

Rotate

X12°

Y-18°

Z0°

Scale

X1×

Y1×

Skew

X0°

Y0°

Perspective

depth800px

Smaller = stronger 3D effect. Only emitted when changed from default.

Transform Origin

50% 50%

Preview Background

CARD

Aa 123

Drag any slider — the card transforms live around the chosen origin point.

CSS Output

transform: perspective(800px) rotateX(12deg) rotateY(-18deg);

Tip: identity values (translate 0, rotate 0°, scale 1×, skew 0°) are auto-omitted. Functions are emitted in perspective → translate → rotate → scale → skew order — change order in your own CSS to get different results.

Why use CSS transforms?

⚡

GPU-accelerated motion

transform runs on the compositor thread, separate from layout. Animating position via translate is dramatically smoother than animating top / left — and never triggers a reflow.

🎯

No layout side-effects

A transformed element keeps its original space in the document. Hover effects, micro-interactions, and 3D card flips never push siblings around — perfect for grid items and inline UI.

🔮

2D and 3D in one property

Translate, rotate, scale, skew, and full 3D perspective stack into a single transform string. One property, one declaration, infinite combinations — and they all interpolate cleanly.

🎨

Reusable as design tokens

Wrap a hover lift in a custom property — --hover-lift: translateY(-4px) scale(1.02) — and reuse it across cards, buttons, and tiles. One source of truth for your motion language.

▶

How to use this generator

Pick a preset

liftHover, pop, tilt, flipX, card3D, isometric, skewLeft — each preset is a starting transform stack you can refine with the sliders below.

Drag any slider

Translate (X/Y/Z), rotate (X/Y/Z), scale (X/Y), skew (X/Y), perspective. Identity values (0, 1×, 0°) are auto-omitted from the CSS output to keep the rule clean.

Choose a transform-origin

The 3×3 grid sets where the transform pivots. TL rotates a card around its top-left corner; C is the default centre. Origin only appears in the output when changed from 50% 50%.

Compare and copy

The dashed ghost shows the original bounds for reference — toggle it off when fine-tuning. Copy CSS to grab the transform plus transform-origin, ready to paste onto any element.

⇄

Transform function reference

Function	Group	Note
`translateX(40px)`	`2D · move`	`Slide horizontally — composited`
`translate(40px, 8px)`	`2D · move`	`Shorthand for X & Y in one call`
`rotate(-8deg)`	`2D · rotate`	`Same as rotateZ() in 2D`
`scale(1.05)`	`2D · scale`	`Equal X & Y — for hover pops`
`scale(1.05, 0.95)`	`2D · scale`	`Squash — X & Y differ`
`skewX(-12deg)`	`2D · skew`	`Slants horizontally — sheared text`
`translate3d(0,0,0)`	`3D · perf hint`	`Forces GPU layer — common micro-opt`
`rotateY(45deg)`	`3D · rotate`	`Needs perspective() to look 3D`
`rotateX(180deg)`	`3D · rotate`	`Vertical flip — card-back reveal`
`perspective(800px)`	`3D · depth`	`Sets the 3D vanishing distance`
`matrix(a,b,c,d,tx,ty)`	`Low-level`	`Combined 2D — rarely written by hand`

Transform patterns

Hover

/* Card lift on hover — pure transform, no layout shift */
.card {
  transition: transform 200ms ease;
  will-change: transform;
}
.card:hover {
  transform: translateY(-6px) scale(1.02);
}

3D flip

/* 3D flip card — requires perspective on the parent */
.flip-scene { perspective: 1000px; }

.flip-card {
  transform-style: preserve-3d;
  transition: transform 0.6s;
}
.flip-card:hover {
  transform: rotateY(180deg);
}

Origin

/* transform-origin controls the pivot point */
.fan-tile-1 {
  transform: rotate(-8deg);
  transform-origin: bottom left;   /* hinges from corner, not centre */
}

.fan-tile-2 {
  transform: rotate(8deg);
  transform-origin: bottom right;
}

✦

Pro tips

Order matters — left to right

translate(40px) rotate(45deg) is NOT the same as rotate(45deg) translate(40px). Each function applies in its own coordinate space, so reordering changes the trajectory entirely.

Use translate, not top/left

Animating top: 40px triggers layout, paint, and composite. Animating transform: translateY(40px) only composites — 5–10× cheaper, especially on mobile.

perspective belongs on the parent (usually)

For multiple 3D children sharing the same scene, set perspective on the wrapper. Use perspective() in transform: only when one element has its own depth.

Pair with will-change carefully

will-change: transform promotes the element to its own GPU layer. Useful for elements about to animate — but applying it permanently to many elements eats GPU memory and can hurt performance.