translate

translate is an individual transform property. Translate:30px 10px moves the rendered box without replacing its independent rotation or its transform function list.

Move the rendered box without moving its layout slot

The outlined holder marks the original box size. The square moves 30px right and 10px down; the following paragraph stays in normal flow.

<div class="stage">
  <div class="holder"><div class="square">Move</div></div>
</div>
<p>Normal-flow neighbor.</p>

.stage {
  padding: 2rem;
  background: #eff6ff;
  margin-block: 1rem;
}
.square {
  width: 70px;
  height: 50px;
  background: #2563eb;
  color: white;
  display: grid;
  place-items: center;
}
.holder {
  width: 70px;
  height: 50px;
  outline: 1px dashed #172554;
}
.square {
  translate: 30px 10px;
}

Move and rotate independently

Changing translate does not require rewriting rotate. The checkbox adjusts just the movement; there is no animated transition in this demonstration.

<input class="move" id="move" type="checkbox" /><label for="move"
  >Move the rotated square</label
>
<div class="stage"><div class="square">Move</div></div>

.stage {
  padding: 2rem;
  background: #eff6ff;
  margin-block: 1rem;
}
.square {
  width: 70px;
  height: 50px;
  background: #2563eb;
  color: white;
  display: grid;
  place-items: center;
}
.square {
  rotate: 15deg;
  translate: 0 0;
}
.move:checked ~ .stage .square {
  translate: 80px 20px;
}

Values and defaults

The initial value is none and the property is not inherited. One length/percentage sets x; y remains zero. Two set x/y; a third length sets z. The z component cannot be a percentage. Values are space-separated, unlike the comma syntax commonly shown for translate() inside transform.

Percentages refer to the transform reference box, not the parent’s size. Individual transforms compose as translate, rotate, scale, then transform. Their compatibility history is newer than the transform functions.

Common mistakes

The original lesson described only transform:translate(), not this property. Translate:none clears only the individual property; it does not clear transform:translate(…). A non-none value can create a stacking context/containing block, even at zero. Movement does not reserve extra layout space and may be clipped.

Learn transform, rotate, and position.

Sources and browser support

MDN: translate describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.