CSS Transform Generator

How to Use the CSS Transform Generator

The CSS Transform Generator lets you adjust movement, rotation, scaling, skewing, and other transforms while checking the result in a preview.

It supports not only 2D Transform, but also 3D Transform and perspective.

1. Select 2D or 3D

Select the type of transform you want to create using “2D” or “3D” above the preview.

In 2D mode, you can adjust:

• translate
• rotate
• scale
• skew
• transform-origin

In 3D mode, you can adjust perspective in addition to transforms that use the X, Y, and Z axes.

2. Adjust the transform values

Change each value using its slider or number input.

Your changes are reflected in the preview and generated code in real time.

In 2D mode, you can adjust:

• Horizontal and vertical movement
• Rotation
• Scaling
• Skewing

In 3D mode, you can specify values for the X, Y, and Z axes to create three-dimensional movement and rotation.

3. Set transform-origin

transform-origin specifies the reference point for transformations such as rotation and scaling.

Select one of the nine points, or enter X and Y values directly for more precise control.

In 3D mode, you can also specify the origin position along the Z axis.

The red point in the preview shows the current transform-origin.

4. Adjust the transform order

When multiple transforms are set, you can change their order under “Transform Order.”

Even when the same values are used, the order of the functions changes the visual result.

For example:

transform: translate(50px, 0) rotate(45deg);

and:

transform: rotate(45deg) translate(50px, 0);

produce different final positions.

Drag and drop the items in the generator to reorder them and compare the results in the preview.

5. Adjust perspective in 3D mode

In 3D mode, use perspective to control the sense of depth.

Turn Perspective on to specify a distance value.

A smaller value brings the viewpoint closer and emphasizes differences caused by depth. A larger value moves the viewpoint farther away and produces a flatter appearance.

You can also change perspective-origin to control the position from which the 3D space is viewed.

6. Switch between the plane and cube previews

In 3D mode, you can switch the preview between:

• Plane
• Cube

Use “Plane” to check a result closer to a typical HTML element, or “Cube” to see changes along the X, Y, and Z axes more clearly.

Note: The cube is a preview designed to make 3D Transform changes easier to see. The CSS used to create the cube itself is not included in the generated code.

7. Adjust the preview element size

Under “Advanced Settings,” you can change the preview element’s:

• width
• height
• border-radius

These settings do not affect the transform itself. They only change the preview element’s shape to make the result easier to inspect.

8. Copy the generated CSS

When you finish adjusting the settings, use the “Copy” button to copy the generated CSS.

Unused transform functions are omitted, so you can copy only the declarations you need.

What Is CSS transform?

transform is a CSS property that applies two- or three-dimensional transformations to an HTML element, including movement, rotation, scaling, and skewing.

For example:

transform: translate(50px, 0) rotate(30deg);

moves an element to the right while rotating it.

A transform changes an element’s visual appearance without directly changing the space reserved for it in the normal layout.

This makes it useful for:

• Hover effects
• Animations
• Rotating cards and images
• Scaling UI elements
• Adjusting the position of decorative elements

Main Functions Available in 2D Transform

translate()

translate() moves an element from its current position.

transform: translate(50px, 20px);

The first value controls the X direction, and the second controls the Y direction.

Positive values move the element right or down, while negative values move it left or up.

rotate()

rotate() rotates an element.

transform: rotate(30deg);

Positive values rotate clockwise, while negative values rotate counterclockwise.

You can change the center of rotation with transform-origin.

scale()

scale() enlarges or shrinks an element.

transform: scale(1.2, 0.8);

A value of 1 represents the element’s original size.

For example:

• 1.2 → 1.2 times the original size
• 0.8 → 0.8 times the original size

Specify X and Y separately to control the horizontal and vertical scale independently.

skew()

skew() tilts an element.

transform: skew(15deg, 5deg);

You can set the skew angle independently for the X and Y directions.

What Is 3D Transform?

In addition to the standard X and Y axes, 3D Transform uses the Z axis to represent depth.

For example:

transform: translate3d(50px, 0, 100px)
  rotateX(30deg)
  rotateY(45deg);

moves and rotates an element in 3D space.

Switch to 3D mode in this generator to adjust values for the X, Y, and Z axes.

Main Functions Available in 3D Transform

translate3d()

translate3d() moves an element along the X, Y, and Z axes.

transform: translate3d(50px, 0, 100px);

When perspective is set, increasing the Z value makes the element appear closer to the viewer.

rotateX() / rotateY() / rotateZ()

In 3D Transform, an element can rotate around each axis.

transform:
  rotateX(30deg)
  rotateY(45deg)
  rotateZ(10deg);

• rotateX(): Rotates around the X axis
• rotateY(): Rotates around the Y axis
• rotateZ(): Rotates around the Z axis

Switching between the plane and cube previews makes the differences easier to see.

scale3d()

scale3d() sets the scale along the X, Y, and Z axes.

transform: scale3d(1.2, 1, 1);

Changes along the X and Y axes are visible even on a flat element.

Because a single flat element has no visible depth, changes to its Z scale can be difficult to see. The effect is easier to observe on an element with a three-dimensional structure.

How Transform Order Works

The order of functions in a CSS transform declaration is important.

For example:

transform: translate(100px, 0) rotate(45deg);

and:

transform: rotate(45deg) translate(100px, 0);

produce different results even though they use the same translate and rotate values.

The same applies to 3D Transform:

transform: translate3d(50px, 0, 100px) rotateY(45deg);

and:

transform: rotateY(45deg) translate3d(50px, 0, 100px);

also produce different results.

When combining multiple transforms, change the order under “Transform Order” in the generator to compare how the result changes.

What Is perspective?

perspective is a CSS property that adds a sense of depth to 3D Transform.

.parent {
  perspective: 800px;
}

The value represents the distance from the viewer to the z=0 plane. A smaller value brings the viewpoint closer and emphasizes changes in size and position caused by depth. A larger value moves the viewpoint farther away and produces a flatter appearance.

perspective is normally applied to the parent element, not directly to the element being transformed.

For this reason, the generator displays the perspective declarations separately from the transform declarations in the generated code.

What Is perspective-origin?

perspective-origin specifies the position from which the 3D space is viewed.

Its initial value is the center:

perspective-origin: 50% 50%;

For example:

perspective-origin: 0% 50%;

makes the 3D space appear as though it is being viewed from a position toward the left.

perspective-origin is used together with perspective.

FAQ