Open menu

CSS Transform Generator

Move, rotate, scale and skew elements in 2D and 3D with live sliders, and see the change against a dashed outline of the original position. Add perspective for real depth, drag the transform origin on a pad, and hide back faces for flip cards. Export the classic transform shorthand or the modern individual translate, rotate and scale properties, plus Tailwind and SCSS.

Preset gallery
Transform me

Accessibility checks

  • Pass 3D rotation with perspective gives real depth.
  • Pass Transforms don't affect layout, so neighbouring content never moves. They are also cheap to animate.
  • Pass Text on the element stays easy to read.

Export code

.transformed {
  transform: perspective(800px) rotateX(15deg) rotateY(-20deg);
}
Import CSS (copy from a site)

Paste CSS from your site or browser dev tools: a rule or just declarations. Supported properties are loaded into the controls; everything else is listed. You can undo the import.

Favourites on this device (0)

No favourites yet.

Move & scale
Rotate, skew & perspective
Origin & options

How to use the transform generator

  1. Start from a preset: 3D tilt, perspective views, isometric, flips, rotations, skews or origin tricks.
  2. Move and scale on each axis. Scale below zero mirrors the element.
  3. Rotate and skew on X, Y and Z, and set the perspective for 3D.
  4. Move the transform origin on the pad to rotate around a corner or edge instead of the center.
  5. Choose the output: the transform shorthand, or individual properties.
  6. Export CSS, SCSS or Tailwind.

How it works

.card {
  transform: perspective(800px) rotateX(15deg) rotateY(-20deg);
  transform-origin: 50% 50%;
}

perspective() inside the transform affects only this element. To share one vanishing point between several children, set perspective on the parent instead.

Worked examples

Example 1: a tilted product card

Load Card hover: lifted 8px and rotated slightly on X and Y. Apply it in a :hover rule with a short transition for an interactive 3D feel, and add a reduced-motion rule.

Example 2: a flip card

Load Hide back for the back face of a flip card. With backface-visibility: hidden, each side disappears when turned away. Rotate the container 180° on Y to flip between them.

Example 3: an isometric illustration

Load Isometric: rotateX(55°) and rotate(-45°) with no perspective produce the familiar isometric look for diagrams and hero graphics.

Performance and accessibility

Transforms are handled by the GPU, so they animate smoothly. Large skews and rotations make text hard to read, which the checker points out. If you animate transforms, respect prefers-reduced-motion.

Common mistakes

  • Expecting neighbours to move. Use margins or layout properties for that; transforms are visual only.
  • Overwriting transforms. Setting transform on hover replaces the whole value. Individual properties avoid this.
  • Blurry text after scaling. Scaling text to non-integer sizes can soften it; finish animations at scale(1).

Performance tips

Transforms are among the cheapest properties to animate because the browser can move an element on the graphics card without recalculating layout. Animate transform and opacity rather than top, left, width or margin for smooth motion. Use will-change: transform sparingly, only on elements that are about to animate, because each promoted layer uses memory. Remove it again once the animation has finished. Also remember that transforms don’t affect layout: a scaled element still takes up its original space, so leave room around it.

Import CSS from your site

Already have a style you like? Open Import CSS (copy from a site), paste a rule or just its declarations from your stylesheet or your browser’s developer tools, and press Import into the controls. This tool reads transform functions (translate, rotate, scale, skew and perspective in 2D and 3D), the individual translate, rotate and scale properties, transform-origin and perspective. Everything else, and rules for states such as :hover or media queries, is listed as skipped, and the import can be undone in one step.

Frequently asked questions

Does the order of transform functions matter?

Yes. Transforms are applied right to left, each in the coordinate system of the previous one, so rotating then translating moves the element along a rotated axis. The generator always writes them in a fixed, predictable order: perspective, translate, rotate, scale, skew.

What are the individual transform properties?

translate, rotate and scale can be set as separate CSS properties. They are applied in that fixed order and can be animated independently, for example scaling on hover without overwriting a rotation set elsewhere. All current browsers support them.

Why does 3D rotation look flat?

Without perspective, 3D rotations are projected flat. Add perspective (in the transform or on the parent) to make nearer parts look larger; 600–1000px looks natural.

Do transforms affect layout?

No. A transformed element keeps its original space in the layout, and neighbours don't move. This is also why transform is one of the cheapest properties to animate.

Does transform-origin matter?

Yes. Rotation and scaling happen around transform-origin, which defaults to the centre. Set it to top left, for example, to rotate a panel around its corner.

Sources