Loading...
Visually create CSS transformations with live preview
CSS transform is a property that lets you translate, rotate, scale, and skew HTML elements in 2D or 3D space without affecting document flow.
Red dot shows transform origin. Dashed box shows original position.
transform: none;
| Function | Description |
|---|---|
| translate(x, y) | Move element horizontally/vertically |
| rotate(angle) | Rotate around transform origin |
| scale(x, y) | Resize element (negative = flip) |
| skew(x, y) | Slant element along axes |
| perspective() | Set 3D depth (lower = more dramatic) |
| rotateX/Y/Z() | 3D rotation around specific axis |
Formula
transform: translate() rotate() scale() skew(), composed right to left as matrix multiplicationOrder = transforms compose, so translate then rotate moves along the original axes while rotate then translate moves along the rotated ones
transform-origin = the point everything pivots and scales around, the centre by default
matrix() = the six-value 2D form every other function compiles down to
3D functions = translate3d, rotateX and perspective, which promote the element to its own compositor layer
Did you know? Writing translate3d(0, 0, 0) or will-change: transform hands an element to the GPU as its own layer. It is the oldest trick for smoothing an animation, and it costs memory per layer, so applying it to everything makes a page slower rather than faster.
Sources
Convert text to ASCII codes and back. Supports decimal, hex, binary, and octal formats.
Calculate required internet bandwidth based on devices and activities in your household.
Encode and decode Base64 strings. Convert text for data URIs, APIs, and safe data transmission.
Create CSS border-radius with visual controls for each corner. Generate circles, pills, and custom shapes.
Create CSS box shadows with multiple layers, live preview, and copy-ready code.
Preview how colors appear with different types of color blindness. Test accessibility for color vision deficiency.