CSS

CSS Transform & Perspective Playground

Move, rotate and scale one element. Inspect how transform order, origin and perspective change a static scene.

Result

One element in a 3D scene

The dashed outline marks its untransformed position. The preview stays still.

Your content
translate3d(20px, -10px, 30px) rotateX(15deg) rotateY(-25deg) rotateZ(5deg) scale3d(1, 1, 1)

Fixed scene: 400 × 320px. Element: 180 × 120px. Extreme transforms can leave the visible scene.

Parent perspective: 600px. Static preview.

CSS 

.transform-scene {
  width: 400px;
  height: 320px;
  display: grid;
  place-items: center;
  perspective: 600px;
  perspective-origin: 50% 50%;
}

.transform-element {
  box-sizing: border-box;
  width: 180px;
  height: 120px;
  display: grid;
  place-items: center;
  background: #2459d3;
  color: #fff;
  border-radius: 16px;
  transform-origin: 50% 50% 0px;
  transform: translate3d(20px, -10px, 30px) rotateX(15deg) rotateY(-25deg) rotateZ(5deg) scale3d(1, 1, 1);
  backface-visibility: visible;
}
HTML 

<div class="transform-scene">
  <div class="transform-element">Your content</div>
</div>

See transform order and parent perspective

  1. Set translation, rotation, scale and the point about which they act.
  2. Change function order or load the 2D example to compare movement.
  3. Add parent perspective for depth, then copy both the parent/child CSS and the HTML structure.

Why does order change the result?

Transforms compose in the written order, and their effect on coordinates proceeds from right to left. For example, translateX(60px) rotateZ(35deg) rotates first and then moves along the original X axis. Reversing those functions rotates the translation direction as well. Rotations within this builder are always listed X, then Y, then Z.

Element transform versus parent perspective

The perspective property belongs to the parent scene here. It creates a shared viewpoint at the parent’s center, unlike a perspective() function inside an individual transform list. X/Y percentage translations refer to the child’s own 180 × 120px border box; Z translation is always pixels. A positive Z value moves toward the viewer. Some combinations can approach or pass the perspective plane and disappear or grow dramatically. Back-face hiding can also make a rotated element vanish.

Static interaction and limits

There is no automatic animation or transition. Controls change the static transform immediately, including when reduced motion is enabled. Translation is bounded to ±200px or ±200% for X/Y and ±200px for Z, rotations to ±180 degrees, and scale to 0.1–3. Origin X/Y stays within 0–100% and origin Z within ±100px. Perspective is none or 100–2000px. Values round to three decimals. The preview is one element in a fixed scene, not a simulation of an entire layout. CSS transforms affect painting and stacking, but do not reserve a larger layout footprint.

Using the export

The CSS and HTML include the parent dimensions, grid centering, child dimensions, visual base styles, origin and perspective needed for this example. The dashed guide is only a preview aid. Keep the parent/child relationship when adapting the result. Names are fixed and inputs accept numbers or known options only.

References

Read MDN transform and MDN perspective .

Related Tools