ToolsHub
CSS Generators

CSS Transform Generator

Move, turn, stretch and tilt an element with sliders and copy the exact transform declaration. The dashed outline shows where the element was, so you can see what each function does, including 3D rotation with perspective.

  • Runs in your browser
  • No sign-up
  • Free to use
Aa

Move, rotate, scale

Skew

3D

Origin

How to use CSS Transform Generator

  1. Use the sliders to translate, rotate and scale the element.
  2. Add skew, or set a perspective and rotate around the X or Y axis for a 3D effect.
  3. Change the transform origin to rotate or scale around a corner or an edge.
  4. Copy the CSS.

CSS Transform Generator features

All 2D functions

translate, rotate, scale and skew, combined in one declaration.

3D rotation

rotateX and rotateY with adjustable perspective.

Transform origin

Choose the fixed point around which the element turns and scales.

Shortest notation

Uses translateX, scale(n) and similar short forms where possible, and omits anything left at its default.

Before and after

A dashed ghost marks the original position of the element.

Linked scale

Keep horizontal and vertical scale equal, or unlock them to stretch.

When to use CSS Transform Generator

  • Hover effects such as a slight lift, zoom or tilt.
  • Card flips and other 3D interactions.
  • Slanted section dividers and angled labels.
  • Start and end states for transitions and keyframe animations.

CSS Transform Generator FAQ

Does transform change the layout?

No. A transformed element keeps its original place in the layout, and neighbours do not move. Only its painted position and shape change. That is why transforms are ideal for animation, and also why a scaled element can overlap what is next to it.

Does the order of the functions matter?

Yes. Functions are applied from right to left, each in the coordinate system left by the previous ones. Rotating and then translating moves the element along the rotated axis, which gives a different result from translating first. The generator uses a fixed, predictable order: translate, rotate, skew, scale.

What does transform-origin do?

It sets the point that stays fixed during rotation, scaling and skewing. The default is the centre. With the origin at a corner, the element swings around that corner like a door on a hinge.

Why does my 3D rotation look flat?

Without perspective there is no vanishing point, so a rotation around the X or Y axis only makes the element look narrower. Add perspective() as the first function, or the perspective property on the parent. Smaller values give a stronger effect, a few hundred pixels is typical.

What is the difference between the perspective function and the perspective property?

perspective() inside transform applies to that one element. The perspective property goes on a parent and gives all its children a shared vanishing point, which is what you want when several elements should appear in the same 3D space.

Can I animate a transform?

Yes, and it is the recommended way to animate movement. Add a transition on transform, or use it in keyframes. Browsers can animate transforms without recalculating layout, so the motion stays smooth.

CSS Animation Generator Pick an effect, tune its timing and copy ready-to-use keyframes. Fifteen common… CSS Flexbox Generator See what each flexbox property does while you change it. Set the direction… CSS Box Shadow Generator Build the shadow you have in mind without guessing at numbers. Adjust offset… CSS Filter Generator Adjust an image the way a photo editor would, in pure CSS. Move the sliders for… CSS Button Generator Create a button that looks finished in every state. Choose the style, colours… Image Rotator Turn sideways or upside-down pictures the right way up, or straighten a tilted…

What transforms do and why they are fast

The transform property changes how an element is drawn without changing where it sits in the document. The browser lays out the page as if the element were untouched, then moves, rotates, scales or skews its picture. Because layout is not involved, nothing around the element shifts, and the operation can be carried out by the graphics processor.

This makes transform the workhorse of interface motion. Moving a panel with translate is far smoother than animating its left or top position, which forces the browser to recalculate layout on every frame. Scaling with transform avoids reflowing text. Almost every well-performing hover effect, slide-in panel and loading spinner is built on transform and opacity.

Each function has a typical use. translate nudges or slides an element and, with percentages, positions it relative to its own size, the basis of a classic centring technique. rotate turns it, with positive angles going clockwise. scale enlarges or shrinks it from the origin, and negative values mirror it. skew slants it, which is handy for angled banners. The 3D functions rotate around the horizontal and vertical axes and need perspective to look three-dimensional.

One caution: a transform creates a new stacking context and a containing block for fixed-position descendants. In practice this means that z-index values inside a transformed element are compared only with each other, and a position: fixed child will be fixed relative to the transformed parent, not the viewport. When an overlay mysteriously stops covering the page, a transform on an ancestor is often the reason.

Other useful tools