×

css · level 3 · unit 5 · lesson 1

  1. meet it
  2. guess first
  3. your turn
  4. fix it
  5. nailed it

Tap a green word if you get lost.

meet it

A moves how a box is drawn, not where it sits.

Margins move a box and push its neighbours along. A transform is different: it changes how the box is drawn, while the layout keeps its old place. Its neighbours never move.

slides a box. The first value is across, the second is down: translate: 10px -4px moves it 10px right and 4px up. Negative values go left and up.

Nothing else has to be laid out again, so transforms are smooth to animate. That is why buttons lift on hover with translate, not margin.

<button class="btn">Lift me</button>
<p>This paragraph never moves.</p>
.btn {
  padding: 10px 18px;
}
.btn:hover {
  translate: 0 -4px;
}

Press show my page to see it here.

Hover over the button: it lifts, and the paragraph stays exactly where it was.