Translation moves an element left, right, up, or down. With `transform: translate(20px, 40px)`, it shifts 20 pixels right and 40 pixels down; negative values move it in the opposite directions. The standalone `translate` property offers a shorter way to express the same displacement. section 16.1 section 16.1.3
A translated element changes its visible position, not its place in document flow. Nearby elements do not move to make room, so translation can cause overlap. Use it when a visual offset is intended, rather than expecting it to rearrange the page. section 16.1
Choose the form that fits the job:
- Use `translate: 50px 0` for a simple offset or when you want to transition translation separately. With individual properties, the order is scale, rotate, then translate. section 16.1.3
- Use `transform: translate(50px, 0) rotate(15deg)` when you need to control the order. Transform functions apply from right to left: this rotates first, then moves right. Reversing them makes the translation follow a rotated axis. section 16.1.2
- For two-dimensional movement, `translate(15px, 50px)`, separate `translateX()` and `translateY()` functions, and `translate: 15px 50px` can produce the same result. `translateZ()` or a third value of `translate` moves an element conceptually nearer or farther away. section 16.4
Fly-in navigation labels
Start a label at `opacity: 0` and `translate: -1em`. On menu hover or keyboard focus within the menu, set `opacity: 1` and `translate: 0`. Transition both properties so the label fades in while sliding from the left. A custom `cubic-bezier()` timing function can carry it briefly past its destination before it settles. section 16.2.2
Listing 16.10 Transitioning in the nav item labels
@media (min-width: 480px) {
.nav-links {
display: block;
padding: 1em;
margin-block-end: 0;
} #4
.nav-links__label { #4
display: inline-block; #1
margin-left: 1em; #4
padding-right: 1em; #4
opacity: 0; #2
translate: -1em; #3
transition: translate 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3), #4
opacity 0.4s linear; #4
}
.nav-links:hover .nav-links__label, #5
.nav-links:focus-within .nav-links__label { #5
opacity: 1; #5
translate: 0; #5
}
.nav-links__icon {
transition: transform 0.2s ease-out;
}
.nav-links a:hover > .nav-links__icon,
.nav-links a:focus > .nav-links__icon {
transform: scale(1.3);
}
}
The CSS listing shows the starting offset, separate translate and opacity transitions, and the hover and focus-within rules that reveal the labels. section 16.2.2
