CSS transform playground

Compose 2D and 3D transforms, compare how function order changes the result, and move the origin before copying the generated code.

Presets

Choose a configuration as a starting point, then adjust any control.

Compositiontransform accepts none or a space-separated function list. The lab groups translation, rotation, scale, and skew so you can compare their composition.

Dimension

Function order

Each function establishes a new coordinate system for the next one. Changing the order can produce a different position and shape even with the same values.

Translation

Rotation

ScaleNegative values flip the element across the corresponding axis. A value of 0 makes it disappear on that axis.

Skew

transform-origintransform-origin sets the point around which the transform is applied. You can define custom percentages or combine the horizontal keywords left, center, and right with top, center, and bottom.

Origin format

Transform space

The dashed outline preserves the untransformed reference.

HTML

<div class="transform-demo">
  CSS transform
</div>

Tailwind CSS

Some classes with arbitrary values can be replaced by native classes, depending on the value and your Tailwind CSS configuration.

<div class="inline-[250px] block-[250px] grid place-items-center rounded-2xl bg-linear-to-br from-orange-500 to-blue-600 text-slate-50 [transform:translate(32px,_-18px)_rotate(-12deg)_scale(1.05,_1.05)_skew(0deg,_0deg)] [transform-origin:50%_50%]">
  CSS transform
</div>

CSS

.transform-demo {
  inline-size: 250px;
  block-size: 250px;
  background: linear-gradient(135deg, #f97316, #2563eb);
  display: grid;
  place-items: center;
  border-radius: 1rem;
  color: #f8fafc;
  transform: translate(32px, -18px) rotate(-12deg) scale(1.05, 1.05) skew(0deg, 0deg);
  transform-origin: 50% 50%;
}