CSS Generator · 2D and 3D

CSS Transform Generator

Translate, scale, rotate, and skew an element in real time. See the transform origin against the original outline and apply 3D perspective to the parent container.

Front

Settings

Transform origin

Preset positions

Center · 50% 50%

Origin X 50% Origin Y 50% The pivot point for transforms. 0% 0% is the top-left corner; percentages refer to the element itself. Show guidesGrid, axes, and the original outline, with the transform origin marked in amber.

2D

translateX 0px translateY 0px Positive Y values move downward along the screen's vertical axis. Uniform scaleLink both axes to preserve the element's proportions. scale 1 rotate 0° Rotate clockwise in the screen plane, just like rotateZ. skewX 0° skewY 0° Skew also distorts text. Beyond 30°, it can become difficult to read.

3D

rotateX 0° Tilt backward or forward, like a box lid. rotateY 0° Turn like a door. At 180°, the back is visible and the text is mirrored. rotateZ 0° Same rotation as rotate. Using both adds their angles. translateZ 0px Move toward or away from the viewer. Perspective is needed to make the depth change visible. perspective 800px Applied to the parent container. Smaller values produce stronger perspective distortion.

Generated CSS

Looking for another property? Explore all generators in web code.

Understand the origin before adding 3D

The guide overlay marks the original box and the transform origin. Change the origin to see how the same rotation behaves around a different pivot. This generator places perspective on the parent container and writes translation, rotation, skew, and scale in a consistent order.

Why does changing transform order change the result?

Transforms combine coordinate systems. Reordering the functions changes the resulting matrix, so a rotation and translation can end in a different position. Test the order your effect requires. A transform changes visual rendering without moving surrounding layout boxes.

All CSS generators · My Lienzo · Creative tools