How to use CSS Transform and 3D Playground

Set translation, rotation, skew and scale values.
Choose a perspective distance if you need one.
Inspect the bounded sample and copy either the functions or equivalent matrix.

Example: CSS Transform and 3D Playground

Move and rotate the sample.

You add

Translate X: 10 px. Rotate Z: 90 degrees. Other rotations and skews: 0. Scale: 1. Perspective: off.

You get

The transform translates by 10 px and rotates by 90 degrees, with the corresponding matrix3d values.

Supported inputs and limits

A fixed transform composition over bounded numeric inputs; it does not parse arbitrary CSS. Matrix values are rounded for copying. The preview clips transformed content to its frame. Transform origin, parent perspective and surrounding layout can change the appearance on your page.

Where your input is processed

This tool processes your input in this browser. Your text and files are not uploaded to UseFreeTools. Check this tool's limits for anything it may save on your device.

Test the same origin and container

The copied functions and matrix describe the same composition. For a visual comparison, apply the same transform origin and container geometry. A parent’s transform or perspective can affect the final screen position.

Questions about CSS Transform and 3D Playground

Why can changing the order change the result?

Rotation, translation and scale generally do not commute. This tool states its order and computes the matrix for that order.

Is the matrix an exact decimal representation?

It is a rounded representation of the computed matrix. Trigonometric results may not have a finite exact decimal form.

Does the transform move nearby elements?

A visual transform does not reflow neighboring elements as a normal layout change would. Leave enough space in your actual layout.

Project manager: Tony Hines · Content updated 2 October 2026 · Report a problem

CSS Transform and 3D Playground

Generate transform CSS controls