CSS Transform Playground

The CSS transform property lets you visually manipulate elements by rotating, scaling, skewing, or translating them. Multiple transforms can be combined into a single declaration.

Transform Functions

• translate(x, y) — Moves the element horizontally and vertically without affecting layout
• rotate(angle) — Rotates the element clockwise around its transform origin
• scale(x, y) — Resizes the element. Values > 1 enlarge, < 1 shrink
• skew(x, y) — Tilts the element along the X and Y axes
• perspective(n) — Adds depth for 3D transforms. Lower values create more dramatic foreshortening

Transform Origin

The transform-origin property sets the point around which transforms are applied. By default it is the center (50% 50%). Changing it affects how rotation, scaling, and skewing behave.

Order Matters

Transform functions are applied right to left. rotate(45deg) translate(100px, 0) first translates then rotates, producing a different result than the reverse order. Experiment with the sliders to see how ordering changes the outcome.

Performance

• Transforms are GPU-accelerated and don't trigger layout recalculations
• Prefer transform over changing top/left for animations
• Combined transforms in a single property are more efficient than separate declarations

You can embed this util on your own site as a widget. Adding ?embed=1 to the URL loads a compact version with just the tool itself; no header, menu, or documentation. Paste this snippet into your HTML:

Copy snippet Adjust the height to taste.