Does the order of functions matter?

Yes, CSS transforms are applied in the order listed; this tool uses a fixed sensible order.

Can I animate between two transform states?

This tool sets a single static transform; combine it with the CSS Animation Generator for animation.

Does scale affect layout size?

No, scale is a visual transform and doesn't change the element's layout box.

CSS Transform Playground

Combine translate, rotate, scale, and skew with a live preview.

Works Offline

Privacy First

No Login

No API

Transform

Translate X (0px)

Translate Y (0px)

Rotate (0deg)

Scale (1.00)

Skew X (0deg)

Skew Y (0deg)

Preview

Generated CSS

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

About the CSS Transform Playground

Adjust translateX/Y, rotate, scale, and skewX/Y with sliders and see the combined CSS transform applied instantly to a preview box. Copy the generated transform property when you're happy with the result.

Examples

Rotate + scale

rotate 15deg, scale 1.2

Output

transform: rotate(15deg) scale(1.2);

Related tools

Border Radius Generator

HTML & CSS

Fine-tune per-corner border radii visually.

Box Shadow Generator

HTML & CSS

Layer multiple box-shadows with a live preview.

Clip Path Generator

HTML & CSS

Design polygon clip-path shapes with a live preview.

CSS Animation Generator

HTML & CSS

Build keyframe animations visually with a live preview.

CSS Aspect Ratio Calculator

HTML & CSS

Simplify ratios and compute matching dimensions.

CSS Filter Playground

HTML & CSS

Tune blur, brightness, contrast, and more with a live preview.

Frequently asked questions

Version 1.0.0 · Updated 2026-08-07 · Runs entirely in your browser