CSS Transform Generator

What is the CSS transform property?

The transform property moves, rotates, scales and skews an element without affecting the layout around it. The space the element originally occupied is kept, neighbours do not move, and the browser can usually animate transforms on the GPU compositor — which is why transforms are the standard way to build smooth hover effects, transitions and animations.

A transform is a list of functions such as translate(), rotate(), scale() and skew(). Order matters: each function changes the coordinate system that the next one works in, so translateX(100px) rotate(45deg) moves then rotates, while rotate(45deg) translateX(100px) moves along the rotated axis and ends up somewhere else. Every function pivots around transform-origin, which defaults to the element's center.

Modern CSS also has individual translate, rotate and scale properties. They are applied in a fixed order — translate, then rotate, then scale, then anything in transform — and can be changed independently, which is handy when a hover state should scale an element without overwriting a rotation set elsewhere. They are supported in all current browsers.

How to use the CSS Transform Generator

1. Choose px or % for translation (percentages are relative to the element's own size) and set X and Y.
2. Set rotation, scale (locked or separate X and Y) and skew.
3. Pick a transform origin in the 3×3 grid — the red dot in the preview shows the pivot point.
4. Enable 3D to add perspective on the parent and rotate around the X and Y axes.
5. Choose the classic transform syntax or individual properties, then copy the CSS.

Example

A card that tilts in 3D on hover:

.scene {
  perspective: 800px;
}

.card {
  transition: transform 0.3s ease;
}

.card:hover {
  transform: rotateX(14deg) rotateY(-22deg);
}

Tips and gotchas

• translate(-50%, -50%) combined with top: 50%; left: 50% centers an absolutely positioned element because percentages refer to the element itself.
• A transformed element creates a new stacking context and becomes the containing block for position: fixed descendants — a common cause of "fixed" headers scrolling inside transformed parents.
• Scaling text or bitmap images up can make them blurry; scale down from a larger size instead.
• perspective on the parent gives all children a shared vanishing point; the perspective() function inside transform gives each element its own.
• Add backface-visibility: hidden to hide the back of an element rotated past 90° on the Y axis, as in card-flip effects.
• Animate transforms with the CSS Animation Generator and lay out the elements first with the Flexbox Generator.