meet it

One `transform` can chain steps, and the order matters.

The older transform property takes a list of transform functions, each a step with brackets: transform: translate(40px, 0) rotate(45deg);. You will meet it everywhere, in libraries, tutorials and older code.

Order matters, because each step changes the directions the next step uses. Move then turn, and the box moves, then turns where it lands. Turn then move, and it moves along its new, turned direction.

The separate properties always run in one fixed order: translate, then rotate, then scale. Use transform when you need a different order.

<div class="tile">A</div>

.tile {
  width: 60px;
  height: 60px;
  transform: translate(40px, 0) rotate(45deg);
  background-color: #e0f2f1;
}

Press show my page to see it here.

Swap the two functions around and run it again to see the tile land somewhere else.

guess first

Turn first, then move. Where does the box end up?

Guess before you run it. Wrong guesses are how you learn, and nothing is marked.

<div class="box">Go</div>

.box {
  width: 50px;
  height: 50px;
  transform: rotate(90deg) translate(60px, 0);
  background-color: gold;
}

your turn

Your turn. Chain two steps in order.

Fill in a transform that moves the postcard 20px right first, then turns it 10 degrees clockwise.

the page you’re styling

<div class="card">Postcard</div>

your css

Your code

Press show my page to see it here.

the card moves 20px right, then turnsnot checked yet
the move comes firstnot checked yet

fix it

The badge flew off at a slant. Can you fix it?

the page you’re styling

<div class="badge">-20%</div>

your css

Broken code to fix

Press show my page to see it here.

the badge moves 30px right, then turnsnot checked yet

The badge moved down and right instead of straight right. Look at the order of the steps.
Turning first changes which way across points, so the move runs at a slant.
Put translate(30px, 0) before rotate(45deg), then press run.

nailed it

you chained transforms in the right order. :D

transform takes a list of steps with brackets.
Each step uses the directions left by the one before.
The separate properties always run translate, rotate, scale.

new words in your collection

transform function

This lesson isn’t saved. A free account remembers every lesson you finish.

One transform can chain steps, and the order matters.

Turn first, then move. Where does the box end up?

Your turn. Chain two steps in order.

The badge flew off at a slant. Can you fix it?

you chained transforms in the right order. :D

One `transform` can chain steps, and the order matters.