CSS Tutorial
CSS Transforms
translate, rotate, scale, and skew move a box in 2D without changing document flow.
Move the paint, keep the slot
transform shifts how a box is drawn. The layout slot — the space other elements reserve — stays where it was. Neighbors do not slide out of the way. That is why a hover scale can overlap a sibling, and why a rotated label still occupies a rectangle in the flow.
Write one transform with one or more functions. A second transform rule replaces the first; it does not add to it. Combine functions in a single value: translate, thenrotate, then scale.
| Function | What it does |
|---|---|
translate(x, y) | Slides the box. One argument is horizontal only |
rotate(deg) | Spins around the origin. Positive is clockwise |
scale(n) or scale(x, y) | Grows or shrinks from the origin |
skew(ax, ay) | Slants the box. Easy to overdo; skip it on type |
transform-origin | The pivot: default is the center of the box |
Click Try it in CSS under an example. That opens /css/try. The next chapter, transitions, will animate these same functions.
translate
translate(0, -6px) lifts a card a few pixels. Percentages are relative to the element itself:translateX(-50%) is half of its width, which is how centering tricks work withleft: 50%.
Example
<style>
body {
font-family: Georgia, serif;
margin: 1.25rem;
background: #f0f9ff;
color: #0c4a6e;
}
.stage {
background: #e0f2fe;
padding: 1.5rem 1rem 2.5rem;
border-radius: 0.85rem;
}
.badge {
display: inline-block;
background: #0d9488;
color: #fff;
padding: 0.4rem 0.85rem;
border-radius: 999px;
transform: translate(12px, -8px);
}
</style>
<h1>Harbor studio</h1>
<div class="stage">
<span class="badge">Open 8–16</span>
<p>The badge sits up and right. The stage still uses the original slot.</p>
</div>rotate
Angles take deg. A small stamp on a card is often rotate(-8deg). Large rotations on paragraphs make reading work. Rotate a decorative label, not the hours list.
Example
<style>
body {
font-family: Georgia, serif;
margin: 1.25rem;
background: #f0f9ff;
color: #0c4a6e;
}
.card {
position: relative;
background: #fff;
border: 1px solid #7dd3fc;
border-radius: 1rem;
padding: 1.4rem 1.2rem 1.2rem;
max-width: 20rem;
}
.stamp {
position: absolute;
top: 0.65rem;
right: 0.75rem;
background: #0284c7;
color: #fff;
padding: 0.2rem 0.55rem;
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
transform: rotate(12deg);
}
</style>
<article class="card">
<span class="stamp">new print</span>
<h1>Harbor studio</h1>
<p>April tide chart at the desk.</p>
</article>scale
scale(1) is identity. scale(1.05) is a 5% grow — enough for hover.scale(0.5) halves both axes. scaleX(-1) mirrors horizontally. Scaling up from the center will overlap neighbors unless you leave padding around the control.
Example
<style>
body {
font-family: Georgia, serif;
margin: 1.25rem;
background: #e0f2fe;
color: #0c4a6e;
}
a.book {
display: inline-block;
background: #0d9488;
color: #fff;
text-decoration: none;
padding: 0.55rem 1.15rem;
border-radius: 999px;
}
a.book:hover {
transform: scale(1.08);
}
</style>
<h1>Harbor studio</h1>
<p>Hover the button in the preview.</p>
<p><a class="book" href="#">Book a desk</a></p>Prefer transform and opacity when you later animate. The browser can composite them without relaying out the page. Animating top or width is heavier.
transform-origin
The origin is the pivot. Default is 50% 50% — the center. A hinge on the left istransform-origin: left center. A stamp that should swing from a corner usestop right. Keywords, lengths, and percentages all work. Two values are x then y.
Example
<style>
body {
font-family: Georgia, serif;
margin: 1.25rem;
background: #f0f9ff;
color: #0c4a6e;
}
.row {
display: flex;
gap: 1.25rem;
align-items: flex-end;
}
.tile {
width: 5.5rem;
height: 5.5rem;
background: #0284c7;
color: #fff;
display: grid;
place-items: center;
border-radius: 0.4rem;
}
.from-center {
transform: rotate(-18deg);
}
.from-corner {
transform: rotate(-18deg);
transform-origin: bottom left;
}
</style>
<h1>Harbor studio</h1>
<div class="row">
<div class="tile from-center">center</div>
<div class="tile from-corner">corner</div>
</div>
<p>Same angle. Different origin.</p>skew slants the box on the x or y axis. A few degrees on a decorative card can work. Skewed text is hard to read. Leave it off Harbor studio’s hours.
What to do next
You can now slide, spin, and size a box without pushing the rest of the page. Transitions interpolate those values when a state changes — usually :hover or a class toggle. That is the next chapter.
Worked examples
The short listings above show one property. These sheets paint documents you would actually ship: a lab dashboard, a clinic form, a marks table, a nav bar.
CSS does not invent meaning. HTML already said what the pieces are. Cascade, specificity, and the box model decide how they look. The numbers are classroom values — current, pH, pulse, 3-4-5 — so the style has something real to sit on.
Preview them in the CSS editor at /css/try. Change one property and watch the page paint. The tags stay the same.
Physics
Lift a card without moving the flow
transform: translateY(-4px) paints the box up. Document flow still reserves the original space. Neighbours do not shuffle. That is why hover lifts feel cheap and safe.
rotate and scale are the same idea. Prefer transform and opacity for motion — they can run on the compositor.
Example
<style>
.card { background: #e0f2fe; padding: 0.6rem; }
.card:hover { transform: translateY(-4px); }
</style>
<div class="card">Hover: 0.45 A card lifts</div>Engineering
A rotated stamp
rotate(-8deg) is a quality-control stamp. The layout hole stays axis-aligned. Overflow may clip the corners — pad the parent if the stamp must stay visible.
Example
<style>
.stamp { display: inline-block; transform: rotate(-8deg); border: 2px solid #0f766e; padding: 0.3rem 0.5rem; color: #0f766e; }
</style>
<p class="stamp">CALIBRATED</p>