Skip to content
Toolspire

CSS Tools

CSS Transform Generator

CSS Transform Generator is part of Toolspire and is ready as soon as this page loads. The order is rotate, then scale, then translate. CSS applies the list from right to left, so the written order is part of the result, not decoration.

Runs in this tabFreeNo account

On this page

What you can do here

One declaration

You do not assemble the three functions yourself.

Order is fixed and stated

rotate, scale, translate, left to right in the string.

Degrees and pixels are labelled

15 is degrees. 10 is pixels. The units are in the output.

The sequence

How to use the CSS Transform Generator

  1. 1

    Start from the sample

    15 degrees, 1.2 scale, 10 px across, 0 down.

  2. 2

    Set scale to 1 if you only want a rotation

    The function is still written, so the order stays obvious.

  3. 3

    Remember CSS reads transforms from the right

    The detail repeats that. Changing the order would be a different move.

Worth knowing

  • CSS Transform Generator on Toolspire: the sample is transform: rotate(15deg) scale(1.2) translate(10px, 0px);.
  • Scale 1 is unchanged. Scale 2 doubles.
  • Translate is in pixels, X then Y.
  • A scale of 0 or less is rejected. A zero scale collapses the element and a negative scale mirrors it, which this page will not hide inside a generator.

The list order is the transform

A CSS transform is a list of functions, and the element is transformed by that list from right to left. This page always writes rotate, then scale, then translate, so the sample means: translate by 10 px, then scale by 1.2, then rotate 15 degrees, in the CSS application order. The string itself stays in the written order. Scale at or below zero is rejected so a collapsed or mirrored element is a choice you make in the stylesheet, not an accidental 0.

FAQ

Questions about CSS Transform Generator

Where does CSS Transform Generator run?

CSS Transform Generator runs in this tab on Toolspire. What you type or drop in is not sent to us and is not stored on a server.

What is the sample declaration?

transform: rotate(15deg) scale(1.2) translate(10px, 0px);

Which function runs first in the browser?

The rightmost. Translate runs before scale, and scale before rotate, for this written order.

Can the scale be 0?

No. The page rejects it.

Are the translate units pixels?

Yes.

Keep going

Related tools

CSS Filter GeneratorNewCSS Filter Generator on Toolspire. Build a CSS filter from a blur in pixels and a brightness percent. No account is required.CSS ToolsCSS Box Model CalculatorNewCSS Box Model Calculator on Toolspire. Add padding and border to a content box under the default content-box model. Content 100 by 50.CSS ToolsCSS Clamp CalculatorNewBuild a CSS clamp() for a size that scales between two viewports, with a minimum and a maximum in pixels. The maths stays on your device.CSS ToolsCSS Glassmorphism GeneratorNewCSS Glassmorphism Generator on Toolspire: Glassmorphism generator: design frosted glass with blur, tint, border and grain, check text contrast live.CSS ToolsCSS Neumorphism GeneratorNewCSS Neumorphism Generator on Toolspire: Neumorphism generator: soft UI box-shadows from any colour and light angle, with contrast checks, pressed states.CSS ToolsBento Grid GeneratorNewBento Grid Generator on Toolspire: Draw tiles with the mouse, preview desktop, tablet and phone, and copy responsive CSS Grid, Tailwind or React code.CSS Tools

Open the full directory

Last updated Report a problem or suggest a feature