CSS transform generator (rotate, move, scale, skew and 3D)

CSS transform generator (rotate, move, scale, skew and 3D): what it is for

The transform property moves, rotates, scales and skews elements without touching the page layout, and it's the lightest way to animate. Move the controls for move, rotate, scale, skew and 3D rotate, choose the origin point and perspective, and watch the card change instantly.

The code comes in the order the browser applies the functions and, with the hover option, includes a smooth transition limited to mouse users and turned off for people who asked for less motion. The page explains why the order matters and why animating transform is lighter than animating top, left or width.

How to use

1. Move the controls.
2. Choose the origin and, for 3D, the perspective.
3. Copy the CSS.

When to use it

• Hover effects on cards.
• Rotated and mirrored icons.
• Cards that flip in 3D.

Frequently asked questions

Does the order of functions in transform matter?

It does. 'translateX(100px) rotate(45deg)' moves and then rotates in place; 'rotate(45deg) translateX(100px)' rotates first and then moves in the already rotated direction, ending up somewhere else. The generator uses the order move, rotate, scale and skew, the most predictable one.

Why use transform for animations?

Transform and opacity are the cheapest properties to animate: they don't make the browser recalculate the page layout and usually run on the GPU. Animating top, left, width or margin instead makes the animation stutter on weaker phones.

What does perspective do?

For 3D rotations (rotateX and rotateY), perspective sets the viewer's distance: small values, like 300px, give a strong, distorted 3D effect; large values, like 1500px, make the rotation subtler.

Is it really free?

Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.

Similar tools