CSS Transform Generator

Transform functions are applied right-to-left in the order they are written. For example, transform: translateX(100px) rotate(45deg) first rotates the element, then moves it — so the movement direction is affected by the rotation. The intuitive order for most use cases is: translate › rotate › scale. This means: move the element to position, then spin it in place, then size it. Reversing creates unexpected behavior. Our generator applies functions in this recommended order automatically.

transform-origin sets the fixed point around which scale and rotate operations occur. The default is center center (50% 50%). Changing it to top left makes an element rotate around its top-left corner. Changing it to bottom center makes an element grow downward when scaled. Use the 9-point origin grid in this tool to click and set the origin visually — the output CSS includes transform-origin automatically when it is not the default.

3D mode enables the rotateX (tilt forward/back), rotateY (spin left/right), and perspective controls. Perspective defines the viewer's distance from the element — lower values (e.g. 300px) create dramatic exaggerated depth, higher values (1500px+) create subtle depth. This tool outputs perspective() as a transform function (e.g. transform: perspective(800px) rotateY(45deg)) which is self-contained on the element itself. This makes the generated CSS fully portable without requiring a parent container setup.

"Copy Value" copies only the raw transform string — for example: scale(1.2) rotateY(45deg). This is useful when you already have a transform property and just need the value to paste in. "Copy CSS" copies the full ready-to-use CSS block including transform-origin (if non-default) and the transform property with optional vendor prefixes — everything you need to paste into a stylesheet.

For most modern projects targeting current browsers (Chrome, Firefox, Edge, Safari), vendor prefixes for transform are not needed — transform has been unprefixed and widely supported since 2014. However, if your project must support older browsers, legacy Android WebViews, or certain embedded environments, toggle "Prefixes" on to include -webkit-, -moz-, -ms-, and -o- variants in the output. The toggle is on by default so you can simply remove what you do not need.

skewX() shears the element horizontally — the left and right edges tilt, making the element look like a parallelogram leaning sideways. skewY() shears vertically — the top and bottom edges tilt into a different parallelogram orientation. Children of skewed elements are also skewed (CSS transforms affect the entire subtree). If you only want a skewed background without skewing content inside, apply skew to a pseudo-element (::before or ::after) instead of the element itself.