css · level 3 · unit 5 · lesson 3
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
sets the a box turns around.
Every turn and resize happens around a pivot, the fixed point that stays still. By default it is the centre of the box. transform-origin moves it.
Use keywords like top left or bottom, or lengths like 0 100%. A door swings from its hinge: transform-origin: left with rotate: -30deg. A dropdown grows from its top edge: transform-origin: top.
Percentages work too, measured from the top left corner: transform-origin: 50% 100% is the middle of the bottom edge.
<div class="door">Door</div>.door {
width: 80px;
height: 120px;
transform-origin: left;
rotate: -30deg;
color: white;
background-color: #9a3412;
}Press show my page to see it here.
guess first
The pivot is bottom right. Which corner stays still?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<div class="box">Hello</div>.box {
width: 100px;
height: 100px;
transform-origin: bottom right;
scale: 0.5;
background-color: #e0f2f1;
}your turn
Your turn. Grow the menu from its top.
Fill in the origin so the squashed menu grows from its top edge, like a blind being pulled down.
the page you’re styling
<ul class="menu">
<li>Profile</li>
<li>Sign out</li>
</ul>your css
Press show my page to see it here.
- the menu grows from its top edgenot checked yet
fix it
The clock hand swings from the wrong end. Can you fix it?
the page you’re styling
<div class="hand"></div>your css
Press show my page to see it here.
- the hand turns around its bottom endnot checked yet
- the hand still turns a quarternot checked yet
- The hand turns, but around the wrong point. Where is a clock hand pinned?
- A clock hand is fixed at its bottom end, in the middle of the clock face.
- Change
toptobottom, then press run.
nailed it
you moved the pivot point. :D
- Boxes turn and grow around their pivot.
- The pivot starts at the centre of the box.
transform-originmoves it, for hinges and dropdowns.
new words in your collection
- pivot
- transform-origin
This lesson isn’t saved. A free account remembers every lesson you finish.