CSS 3D Transform Generator - Rotate, Scale, Skew & Perspective

How to use this tool

1. Choose a preset or use the sliders for rotation, scale, skew, translation, perspective, and transform origin.
2. Reorder active transform functions when the sequence matters, then inspect the live preview and CSS output.
3. Copy both the transform and transform-origin declarations into your stylesheet.

How CSS transforms work

This generator builds a CSS transform declaration from rotation, translation, scale, skew, and perspective controls. The preview uses the same ordered transform string as the generated CSS, so a change to a slider or the active function order is reflected in both places. Identity functions are omitted; with every transform control at its default, the output is transform: none. The separate origin controls still emit a transform-origin declaration, centered at 50% 50% 0px by default.

Choose a transform origin

A transform origin is the pivot point around which rotations and scaling happen. Its X and Y coordinates are percentages of the element's box, while Z is an offset in pixels. For example, setting X to 0%, Y to 100%, and Z to 12px makes a rotation pivot at the lower-left edge, twelve pixels out from the element's plane. This is useful for effects such as a door swinging from a hinge or a card turning around one edge. The origin affects the preview and is included in the CSS output even when the transform is otherwise identity.

Function order and perspective

CSS combines transform functions by multiplying their matrices from left to right. Because a point is multiplied by the resulting matrix, the coordinate-space effects act from right to left. Translation followed by rotation can therefore place an element differently than rotation followed by translation. Use the active function list to reorder the current chain; no function has a universally required position, and the initial order follows the tool's original transform sequence.

The Perspective slider emits perspective(distance) inside the element's transform list. CSS also has a separate perspective property that can be applied to a parent to establish a shared viewing distance for transformed children. That parent property is a distinct effect and is not modeled here, so the preview and output apply perspective only once. Lower distances produce stronger depth; very small values can look distorted, while large values make a rotation appear flatter. The card-flip preset combines a Y-axis rotation with perspective as a starting point for a UI card transition.

Matrix note and caveats

Browsers convert transform functions into matrices to combine them. A 2D matrix maps a point with x′ = ax + cy + e and y′ = bx + dy + f, combining scale, rotation, skew, and translation in six values. This tool keeps the readable function form rather than showing a matrix readout. It previews a single element; parent perspective, perspective-origin, animation timing, and layout changes around the element can affect a finished design, so check the generated declarations in the context where they will be used.