Scale
Scale is a CSS transformation that enlarges or reduces an element along one or more dimensions without changing its layout dimensions.
CSS in Depth, Second Edition
A scale transform changes an element's rendered dimensions along one or more axes without changing its layout dimensions.
- How it is used
- Enlarges interactive icons without moving adjacent labels or other layout elements.
- How deep it goes
- Explains scale values and layout effects through a worked navigation example, then distinguishes standalone properties from combined transforms.
- Examples
- Uses a half-size card and an SVG navigation icon that grows on hover or keyboard focus.
- What you can do after
- Apply it via CSS to resize an interactive icon smoothly without shifting its label.
Tiny CSS Projects
The CSS scale() transform function enlarges or reduces an element along the horizontal and vertical axes.
- How it is used
- Applies proportional growth or reduction to interactive share links during hover and keyboard focus.
- How deep it goes
- Defines one- and two-value syntax, explains scale(1) as the default, and notes background and overflow consequences.
- Examples
- Demonstrates a social-sharing link that grows to 125% on hover or focus and animates the change over 250 milliseconds.
- What you can do after
- Apply it via CSS to create proportional magnification and animate it between normal and enlarged states.
Related concepts
- scaleY functionhas part · The CSS scaleY() transform function scales an element along its vertical axis.
- CSS transform propertyuses · The CSS transform property applies two-dimensional or three-dimensional geometric transformations, such as translation, rotation, scaling, and skewing, to an element’s rendering.
- height propertyalternative to · A height property specifies or reports an element’s vertical dimension.
- widthalternative to · Width is a measure of extent along a specified dimension, such as spatial size or the number of units or features in a model.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.