CSS Transform Generator (2D + 3D, Ghost Reference) — Tailwind / React / Vue Export

Surface:

CARD

Aa 123

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

Advertisement

Functions3
Origin50% 50%

About this generator

Stack 2D and 3D CSS transforms visually — translate (X/Y/Z), rotate (X/Y/Z), scale (X/Y with lock), skew (X/Y), perspective, and transform-origin. 14 curated presets — liftHover, pop, shrink, tilt, flipX, flipY, card3D, isometric, shake, skewLeft/Right, spin90/180.

Ghost-reference overlay shows the element’s original position as a dashed outline so you can see EXACTLY where it traveled. Identity values (translate 0, rotate 0°, scale 1×, perspective 1000px) are auto-omitted from the output so the CSS stays intent-clear.

5 framework exports + URL hash permalink. No login, no watermark, no paywall. Free and MIT-licensed.

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.