My Tool Studio
CSS

CSS Transform Generator

This CSS transform generator moves, rotates, scales and skews an element with sliders and writes one compact transform line. Turn on 3D for rotateX, rotateY, translateZ, perspective() and a hide back face option, pick a transform-origin from a 9-point grid, and scale X and Y separately or mirror them. Because the order of functions changes the result, you can move each function up or down the chain. Nine presets include a tilt card, a flip, an isometric view and a door that opens on its hinge. A hover mode previews the transform with a transition. Copy the CSS, individual translate, rotate and scale properties, the computed matrix() or a Tailwind class, and share a link. A dashed outline marks where the element sat before the transform.

Always freeNo sign upRuns in your browser

Presets

Preview

The dashed outline shows the element before the transform.

transform: none;

Function order

Transforms apply right to left, so the order changes the result. Rotate then translate is not the same as translate then rotate.

  1. 1.translate
  2. 2.rotate
  3. 3.rotateX / rotateY
  4. 4.scale
  5. 5.skew
Translate X0px
Translate Y0px
Rotate0deg
Scale X and Y separately
Scale100%
Mirror X
Mirror Y
Skew X0deg
Skew Y0deg
3D (rotateX, rotateY, translateZ, perspective)
Apply on hover with a transition

transform-origin

center

How to use

01

Start from a preset or the sliders

Click a preset such as Tilt card or Isometric, or drag Translate X and Y (px or %), Rotate, Scale (or Scale X and Y), Mirror and Skew X and Y.

02

Add 3D, origin and order

Switch on 3D for Rotate X, Rotate Y, Translate Z and Perspective. Click one of the nine origin squares, reorder functions under Function order, and switch on hover with a transition if needed.

03

Copy the CSS

Pick CSS, Individual props, matrix() or Tailwind and press Copy. Reset all clears every control, and Copy share link saves the settings.

Why CSS Transform Generator

CSS transform functions and the ranges in this tool

Each slider maps to one transform function. Values outside these ranges are valid CSS; the ranges just cover what most interface work needs. Scale is shown as a percentage on the slider and written as a decimal factor, so 105 percent becomes scale(1.05).

Newer CSS also has separate translate, rotate and scale properties that can be set and animated on their own. The CSS tab writes the single transform property, which every browser has supported for many years, and the Individual props tab writes the newer form.

FunctionSlider rangeExample outputTypical use
translate(x, y)-200 to 200pxtranslate(20px, -10px)Nudging, slide-in effects
rotate()-360 to 360degrotate(8deg)Tilted cards, spinners
scale()10 to 200%scale(1.05)Hover zoom
skewX() / skewY()-45 to 45degskewX(-10deg)Slanted banners
rotateX() / rotateY()-180 to 180degrotateY(-15deg)3D tilt and card flips
perspective()100 to 2000pxperspective(600px)Depth for 3D rotations

2D vs 3D transforms

2D transforms move an element within the flat plane of the page: sideways, up and down, around its center, bigger or smaller, or slanted. They are enough for most hover effects.

3D transforms rotate the element around the horizontal axis (rotateX) or the vertical axis (rotateY), so it tips toward or away from you. Without perspective, a 3D rotation just looks like the element got narrower. perspective() sets how far the viewer is from the element: 200px feels close and dramatic, 1500px feels flat and subtle.

This tool adds perspective() inside the transform itself, which suits a single element. When several sibling elements should share one vanishing point, put the perspective property on their parent instead.

For a card flip, rotate the card 180 degrees on Y and add backface-visibility: hidden to the front and back faces so only one side shows at a time.

Common questions

In what order does the CSS transform generator chain the functions?
By default perspective() first when a 3D function is set, then translate, rotate, rotateX and rotateY, scale and skew. Use the Function order list to move any group up or down; perspective always stays first. Only the functions you changed are written.
Why does my element land somewhere unexpected when I combine rotate and translate?
Rotation turns the element's own axes. If rotate comes before translate, the move happens along the rotated axis and the element drifts diagonally. Move rotate above translate in the Function order list to see it, then move it back.
How do I make a 3D card tilt with CSS transform?
Click the Tilt card preset, or switch on 3D, set Perspective to around 600px and move Rotate X and Rotate Y a little. The output starts with perspective(600px), which gives the tilt depth. Lower perspective values make the effect stronger.
What does transform-origin change?
It sets the point the element rotates, scales and skews around. The default is the center. Pick center left and a Rotate Y swings the element like a door on a hinge, which is what the Door open preset does. Translate is not affected by the origin.
Why is perspective missing from my copied transform?
perspective() only changes how 3D functions look. If Rotate X, Rotate Y and Translate Z are all 0, it has no visible effect, so the tool leaves it out to keep the line short.
What are the individual translate, rotate and scale properties?
Newer CSS lets you set translate, rotate and scale as separate properties, so one can change on hover without repeating the others. The Individual props tab writes them. The browser always applies them in the order translate, rotate, scale, and they cannot express skew or 3D rotation.
What is the matrix() tab for?
It shows the same transform as one matrix() or matrix3d() value, computed by your browser. Some animation libraries and design tools output matrices, so this helps compare values. It needs translate in px, because a percentage depends on the element's size.
Do CSS transforms push the surrounding content around?
No. The element keeps its original space in the layout and is only drawn somewhere else. Neighbors do not move, which is why a scaled card can overlap the one next to it and why transforms are cheap to animate.
How do I preview a transform on hover?
Switch on Apply on hover with a transition and set the duration. The preview element then stays in place until you hover or focus it, and the CSS tab writes a base rule with transition plus a :hover and :focus-visible rule with the transform.
How do I get transform: none as a clean starting state?
Press Reset all, or return every slider to its default: 0 for translate, rotate and skew, and 100 percent for scale, with the mirror switches and 3D off. The output then reads transform: none, which is the right starting value for a transition.

More CSS tools

View all

CSS Clip Path Generator

Visual clip-path editor with SVG import and PNG tracing

CSS

CSS Gradient Generator

Build linear, radial and conic gradients

CSS

CSS Box Shadow Generator

Build layered box shadows with presets

CSS

CSS Border Radius Generator

Round corners, per corner or as blobs

CSS