A scale transform makes an element appear smaller or larger without changing the space it occupies in layout. Unlike changing an icon’s width and height, scaling it does not push its label or neighboring elements aside. The enlarged element can still overlap nearby content, so leave room when that matters. section 16.2.1 section 16.1
Use `transform: scale(0.5)` to render an element at half its initial size. Values below 1 shrink it; values above 1 enlarge it. For a simple scale, the standalone `scale` property is often easier to work with, especially when transitioning that change separately from other transforms. section 16.1 section 16.1.3
Listing 16.9 Scaling up the icon when its link is hovered or focused
@media (min-width: 30em) {
.nav-links {
display: block;
padding: 1em;
margin-block-end: 0;
}
.nav-links__label {
margin-left: 1em;
}
.nav-links__icon {
transition: scale 0.2s ease-out; #1
}
.nav-links a:hover > .nav-links__icon,
.nav-links a:focus > .nav-links__icon {
scale: 1.3; #2
}
}
A navigation icon grows to `scale: 1.3` when its link is hovered or keyboard-focused. Its `scale` transition smooths the change, while the adjacent label stays put. section 16.2.1
SVG icons suit this effect because they can grow without losing resolution. For motion effects, changing a transform avoids recalculating layout or repainting page contents. Scale can also be combined with rotation and translation: functions in `transform` apply from right to left, while standalone properties apply scale, then rotate, then translate. section 16.2.1 section 16.5 section 16.1.3
