CSS Transform Playground

About this tool

CSS transforms — translate, rotate, scale and skew — are the foundation of hover lift effects, tilted badges, skewed hero backgrounds, and GPU-accelerated animations. The CSS Transform Playground gives you six number inputs: Translate X and Translate Y in pixels, Rotate in degrees, Scale as a ratio (minimum 0.1), and Skew X and Skew Y in degrees. A gradient sample box in the preview applies the combined transform as you type, and Reset returns every value to neutral. The output is a single transform declaration that always lists the functions in the same order — translate, rotate, scale, skew — including any left at their neutral values, so you can delete what you do not need. Because transform functions apply in written order, rotating before translating gives a different result; the playground shows the result of this fixed order. 3D functions, perspective and transform-origin are not included.

Why use it

• Four 2D Functions: translate, rotate, scale and skew each have number inputs — Translate X/Y in px, Rotate and Skew X/Y in degrees, Scale as a ratio — so you can combine them without writing test code.

• Fixed Order: The output always lists translate, then rotate, then scale, then skew. Transform functions apply in written order, so the preview shows exactly what that sequence produces.

• Live Box: A 72px gradient box in the preview applies the transform on every keystroke, so you can see offset, rotation and distortion together.

• Reset Button: One click returns all six inputs to their neutral values (0, and 1 for scale), giving you a clean baseline without reloading the page.

• Copy CSS: The output is a single transform declaration including every function, even ones left at neutral values, ready to paste into a :hover rule or @keyframes stop.

How to use

1. Enter Translate X and Translate Y in pixels
2. Enter Rotate in degrees
3. Set Scale (minimum 0.1; 1 is the original size)
4. Enter Skew X and Skew Y in degrees
5. Watch the sample box update, and click Reset to return all values to 0 and scale to 1
6. Click Copy CSS to grab the transform declaration

When it helps

• When building a hover card lift effect with translateY and scale that should feel natural
• When nudging a badge or icon with a small rotation and offset
• When designing a skewed hero section background that tilts without breaking text readability
• When learning what each 2D transform function does before combining them
• When testing scale values below and above 1 for a press or hover effect
• When producing a starting transform value to paste into a :hover rule or @keyframes stop

Examples

Translate Y: -4, Scale: 1.02 (others neutral)

transform: translate(0px, -4px) rotate(0deg) scale(1.02) skew(0deg, 0deg);

Rotate: -3, Skew X: 2 (others neutral)

transform: translate(0px, 0px) rotate(-3deg) scale(1) skew(2deg, 0deg);

Translate X: 20, Rotate: 45, Scale: 1.5

transform: translate(20px, 0px) rotate(45deg) scale(1.5) skew(0deg, 0deg);

Tips

• Write rotate before translate when you want movement along a rotated axis; write translate before rotate when you want rotation around a fixed offset point — the difference is significant
• Use translate3d(0, 0, 0) or translateZ(0) as a no-op transform to force GPU layer promotion when other non-transform properties change on the element
• Set perspective on the parent element rather than in the child's transform chain when multiple children need consistent shared depth
• transform-origin defaults to center — move it to an edge (0% 50% for left hinge, 100% 50% for right hinge) before applying rotate for door and page-flip animations
• Combine all transform functions in a single transform declaration — declaring transform twice overrides the first, not stacks with it

Frequently Asked Questions

Glossary

Translate

A transform function that moves an element along the X, Y, or Z axis without affecting its layout position or surrounding elements. Available as translate(), translateX(), translateY(), translateZ(), and translate3d().

Rotate

A transform function that spins an element around a point defined by transform-origin. rotate() works in 2D; rotateX(), rotateY(), and rotateZ() rotate around the respective 3D axes.

Scale

A transform function that enlarges or shrinks an element proportionally or on individual axes. scale(1.2) enlarges by 20%; scaleX(0.5) squishes to half width without affecting height.

Skew

A transform function that distorts an element along the X or Y axis, tilting it like a parallelogram. Useful for slanted backgrounds and angular design elements.

Perspective

A CSS transform function or property that establishes the viewer distance for 3D rendering. Lower values create dramatic depth foreshortening; higher values produce subtle depth.

Transform Origin

The fixed point around which transform functions pivot. Defaults to the element's center; changing it to a corner or edge enables hinge, fold, and corner-zoom animations.