consolelog.tools

CSS Transform Generator

Build 2D & 3D CSS transforms with live sliders and a drag-to-rotate 3D preview — translate, rotate, scale, skew, perspective, and transform-origin. Export CSS, SCSS, Tailwind v4/v3, or JS.

About this ToolHow it works, benefits & use cases

Compose 2D and 3D CSS transforms with sliders and a draggable preview. Set translateX/Y/Z, rotateX/Y/Z, scaleX/Y/Z (with an optional link so the two scale axes move together), skewX/Y, and perspective, then position the transform-origin with a 3×3 preset grid or exact X/Y values. The preview stage shows your element — a card, box, image, or text — against a faint untransformed ghost so you can see exactly how far it has moved or tilted, and you can grab the stage and drag to rotate it in 3D in real time. The tool builds the transform string in a predictable order — perspective() first, then translate, rotate, scale, and skew — so the result is reproducible. A row of presets gives quick starting effects, and a live code readout shows the exact transform value. Export to CSS, SCSS, Tailwind v4 (which gets native 3D utilities like rotate-x-* and translate-z-*), Tailwind v3 (a single arbitrary [transform:…] class), or a JS inline-style object. The full transform is encoded in a shareable URL.

How to Use

  1. 1Apply a preset for a quick starting effect, or build from scratch.
  2. 2Set Translate X/Y/Z, then Rotate X/Y/Z with the sliders.
  3. 3Adjust Scale X/Y (link them to keep them equal, or unlink for independent axes) and Skew X/Y.
  4. 4Add Perspective and choose the transform-origin from the preset grid or by typing X/Y values.
  5. 5Drag the preview stage to rotate the shape in 3D, and switch the preview target (card, box, image, text).
  6. 6Pick an output format and copy, download, share, or pipe the generated transform.

Key Benefits

  • Full 2D and 3D control: translate, rotate, scale, skew, and perspective on all axes
  • Drag-to-rotate 3D preview with a ghost of the untransformed shape for reference
  • Predictable build order (perspective → translate → rotate → scale → skew)
  • transform-origin via a 3×3 preset grid or exact X/Y values
  • Link or unlink the scale axes; preview on card, box, image, or text
  • Tailwind v4 native 3D utilities, plus CSS, SCSS, v3 arbitrary class, and JS exports
  • Live code readout and a shareable URL, generated entirely in the browser

Common Use Cases

  • Building 3D card-flip and tilt effects with perspective and rotateY
  • Creating hover lift or zoom states by combining translate and scale
  • Skewing banners or section dividers for a dynamic layout
  • Dialing in an exact transform value to copy into existing CSS
  • Generating Tailwind v4 3D utility classes for a component

Drag the preview to rotate in 3D

transform: perspective(800px) rotateX(-8deg) rotateY(25deg);

Presets

Translate

Rotate

Scale & skew

Perspective & origin

Copy, download, share, or pipe to another tool

.element {
  transform: perspective(800px) rotateX(-8deg) rotateY(25deg);
}

2D and 3D, in one place

Order matters in transform: this builds perspective() first, then translate → rotate → scale → skew, so the result is predictable. Drag the preview to rotate, or dial in exact values. Tailwind v4 exports native 3D utilities (rotate-x-*, translate-z-*, transform-3d); v3 gets a single arbitrary [transform:…] class.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on Twitter

Related tools