Chapter 16: Transforms
Introduces CSS transforms as a way to change an element’s shape or position, often alongside transitions or animations.
After this chapter you will be able to
- Purpose of CSS transforms. Explain that the transform property can change or distort an element’s shape or position by rotating, scaling, or skewing it in two or three dimensions, and that transforms are often used with transitions or animations.
- Four Basic Transform Types. Describe what rotate, translate, scale, and skew do when used as functions of the transform property, including how the example values and negative values affect the card.
- Transforms and Document Flow. Explain why a transformed element can overlap nearby content even when it appears to move, and describe the suggested way to prevent unwanted overlap.
- Transform origin behavior. Explain how an element transforms around its origin and why translation is an exception.
- Multiple transform order. Explain that space-separated transform values apply from right to left, and describe why placing translate() first in the CSS makes it act last, after rotation or scaling.
- Individual transform property choices. Describe the standalone translate, rotate, and scale properties and explain when they are useful instead of the transform property.
- Individual transform application order. Explain the order in which individual transform properties are applied and when the transform property is preferable.
- Responsive Navigation Layout. Trace how the menu changes from a horizontal mobile layout to a fixed, vertically stacked desktop layout, including how the desktop rules override the mobile rules.
- Smooth icon scaling without reflow. Explain how a scale transform and transition make a navigation icon grow when its link is hovered or focused, and why this avoids shifting the label beside it.
- Combined label transitions. Describe how the labels appear while the icons remain visible: the labels fade in and move right from a position slightly left of their final location.
- Overshooting Bézier bounce. Explain how the custom cubic-bezier() curve makes a translating label briefly pass its final position before settling back.
- Staggered menu item transitions. Explain how successively longer transition delays make menu items fly in consecutively instead of all at once, and why the first item needs no delay.
- Transform animation performance. Explain that transforms can produce visual results similar to relative positioning or explicit sizing, but are generally more performant when animated. Describe when the difference may be especially noticeable and which approach the section recommends.
- Rendering pipeline stages. Describe what layout, paint, and composite each do when the browser renders a page.
- Costs of visual changes. Distinguish a change that requires layout and reflow from one that requires paint but not layout, using the section’s examples.
- Layered animation performance. Explain why changes to opacity and transform properties can render faster during an animation.
- Selective animation optimizations. Describe when to use `will-change` and how to prioritize properties when animation performance is a problem.
- Three-Dimensional Translation Axes. Explain how translation extends from horizontal and vertical movement to movement along the z-axis, and name the CSS forms given for z translation.
- Three-Dimensional Rotation Axes. Distinguish rotation around the x, y, and z axes, including how rotate() relates to rotateZ() and how the rotate property names an axis.
- Perspective and visible depth. Explain how perspective changes the appearance of a 3D transform: nearer parts appear larger, farther parts appear smaller, and a shorter perspective distance makes the effect stronger.
- Individual versus shared perspective. Distinguish a perspective() transform on each element from the perspective property on a common ancestor, including how the four-box example looks in each case.
- Perspective origin and viewpoint. Explain how perspective-origin changes the apparent camera position and how perspective distance affects the strength of the result.
- Visibility of an element’s backface. Describe what appears when an element rotates away from the viewer and how backface-visibility: hidden changes that behavior.
- Preserving nested 3D scenes. Explain why rotating the parent of a 3D scene can look flat and how transform-style: preserve-3d corrects it.
What it builds on
- Normal document flow (chapter 3) · The idea of normal document flow.
- Mobile first (chapter 7) · Supplies the mobile-first approach used for the menu.
- Fixed positioning (chapter 6) · Supplies the fixed positioning used to dock the desktop menu.
- From here to there (chapter 15) · Transitions between visual states
- Custom Bézier curves (chapter 15) · Custom Bézier curves as transition timing functions.
Section by section
Introduction
Introduces CSS transforms as a way to change an element’s shape or position, often alongside transitions or animations.
- Purpose of CSS transforms: Explain that the transform property can change or distort an element’s shape or position by rotating, scaling, or skewing it in two or three dimensions, and that transforms are often used with transitions or animations.
Why it matters: This gives you a starting point for recognizing what transforms do before working through specific effects.
Key terms: transform property, transforms, transitions, animations
16.1 Rotate, translate, scale, and skew
This section introduces the four basic CSS transforms, shows how their values affect a card, and explains two constraints on using them.
- Four Basic Transform Types: Describe what rotate, translate, scale, and skew do when used as functions of the transform property, including how the example values and negative values affect the card.
Why it matters: These four effects are the vocabulary for understanding the card examples and later uses of transforms. - Transforms and Document Flow: Explain why a transformed element can overlap nearby content even when it appears to move, and describe the suggested way to prevent unwanted overlap.
Why it matters: It explains why a visually moved card may cover content instead of making room for itself. - Inline Element Transform Limitation: State why a transform cannot be applied directly to an inline element such as a span or link, and identify the changes the section offers to make it transformable.
Why it matters: This constraint helps explain why a transform may appear not to work on a link or span.
Key terms: transform property, rotate(), translate(), scale(), skew(), document flow, translate, margin, inline elements, inline-block
16.1.1 Changing the transform origin
Explains how the transform origin anchors rotation, scaling, and skewing, and how to change its position.
- Transform origin behavior: Explain how an element transforms around its origin and why translation is an exception.
Why it matters: It helps you predict which part of an element will stay put during a transform. - Setting the transform origin: Describe the default transform origin and how to place it elsewhere with transform-origin.
Why it matters: Choosing an origin lets you control where a rotation pivots or where scaling and skewing begin.
Key terms: transform origin, translate(), transform-origin, center, percentages
16.1.2 Applying multiple transforms
This section explains how multiple CSS transforms are applied and why their order affects the direction of translation.
- Multiple transform order: Explain that space-separated transform values apply from right to left, and describe why placing translate() first in the CSS makes it act last, after rotation or scaling.
Why it matters: Transform order determines whether adjusting a translation feels like moving the element along ordinary axes or a rotated one.
Key terms: transform property, translate(), rotate(), scale(), source order
16.1.3 Individual transform properties
This section introduces individual CSS transform properties, explains their fixed application order, and compares when to use them instead of the transform property.
- Individual transform property choices: Describe the standalone translate, rotate, and scale properties and explain when they are useful instead of the transform property.
Why it matters: Individual properties can keep a simple transform concise and make it easier to change just one part. - Individual transform application order: Explain the order in which individual transform properties are applied and when the transform property is preferable.
Why it matters: The fixed order determines the result and helps you choose the right CSS syntax.
Key terms: translate, rotate, scale, skew, individual transform properties, transform property
16.2 Transforms in motion
This section sets up a responsive icon-and-label navigation menu and explains why transforms will be paired with motion in the effects added next.
- Transforms Paired With Motion: Explain why the section pairs transforms with motion rather than relying on static transforms alone.
Why it matters: It explains the design reason for adding motion to this menu. - Navigation Links And SVG Icons: Describe the menu link structure and explain why its SVG icons can be resized without losing resolution.
Why it matters: The icon-and-label structure supports the planned menu effects, and SVGs remain sharp when resized. - Responsive Navigation Layout: Trace how the menu changes from a horizontal mobile layout to a fixed, vertically stacked desktop layout, including how the desktop rules override the mobile rules.
Why it matters: The responsive layout establishes the menu that the later transition and transform effects will act on.
Key terms: transforms, motion, skew(), nav, SVG, Scalable Vector Graphics, icon image, text label, mobile-first, flexbox
16.2.1 Scaling up the icon
The section shows how to enlarge a navigation icon without shifting nearby content and explains why SVG is well suited to icons that change size.
- Smooth icon scaling without reflow: Explain how a scale transform and transition make a navigation icon grow when its link is hovered or focused, and why this avoids shifting the label beside it.
Why it matters: The icon can signal which link is active without making the menu jump around. - SVG icons for resizing: Explain why the example uses SVG icons when scaling them, and describe the additional styling option that inline SVG provides.
Why it matters: SVG keeps the enlarged icon crisp and offers more styling flexibility when placed inline.
Key terms: scale transform, transition, hovered, focused, document flow, SVG, <img>, inline, CSS, pixelation
16.2.2 Creating “fly in” labels
This section shows how menu labels can fade and slide into view on hover or keyboard focus, with a subtle bounce at the end.
- Combined label transitions: Describe how the labels appear while the icons remain visible: the labels fade in and move right from a position slightly left of their final location.
Why it matters: Combining opacity and movement makes the labels appear without keeping them visible all the time. - Menu-wide interaction triggers: Explain why :hover and :focus-within are applied to the top-level nav-links element rather than to individual labels.
Why it matters: The same menu reveal works for mouse users and people navigating with a keyboard. - Overshooting Bézier bounce: Explain how the custom cubic-bezier() curve makes a translating label briefly pass its final position before settling back.
Why it matters: The overshoot explains why the label feels as though it has momentum rather than simply stopping.
Key terms: opacity, translate, transition, :hover, :focus-within, nav-links, cubic-bezier(), bounce effect
16.2.3 Staggering the transitions
This subsection uses position-based transition delays to make menu items fly in one after another and notes the maintenance limit of that approach.
- Staggered menu item transitions: Explain how successively longer transition delays make menu items fly in consecutively instead of all at once, and why the first item needs no delay.
Why it matters: Small differences in timing turn simultaneous movement into a rolling effect. - Fixed selector count limitation: Explain why position-specific delay rules may need updating when the menu grows.
Why it matters: A staggered effect built with one rule per position needs attention as the menu changes.
Key terms: transition-delay, stagger, :nth-child(), selectors, menu items
16.3 Animation performance
This section explains why transforms are generally preferable to positioning or explicit sizing when animating elements.
- Transform animation performance: Explain that transforms can produce visual results similar to relative positioning or explicit sizing, but are generally more performant when animated. Describe when the difference may be especially noticeable and which approach the section recommends.
Why it matters: Choosing a transform can help keep motion smooth, particularly when the page has many elements or a complex element to move.
Key terms: transforms, translate, scale transform, relative positioning, left property, transitions
16.3.1 Looking at the rendering pipeline
This section explains how the browser’s rendering pipeline affects animation performance and when to use `will-change`.
- Rendering pipeline stages: Describe what layout, paint, and composite each do when the browser renders a page.
Why it matters: The stages explain why some visual changes take more work than others. - Costs of visual changes: Distinguish a change that requires layout and reflow from one that requires paint but not layout, using the section’s examples.
Why it matters: Recognizing which changes trigger reflow helps you spot expensive work in an animation. - Layered animation performance: Explain why changes to opacity and transform properties can render faster during an animation.
Why it matters: An animation repeats rendering work many times a second, so avoiding repeated repainting can make motion smoother. - Selective animation optimizations: Describe when to use `will-change` and how to prioritize properties when animation performance is a problem.
Why it matters: These choices can improve choppy animations without spending extra resources on unhelpful layers.
Key terms: rendering, layout, paint, composite, reflow, background color, opacity, transform properties, paint layer, GPU acceleration
16.4 3D transforms
This section extends familiar 2D transforms to translation and rotation along the x, y, and z axes.
- Three-Dimensional Translation Axes: Explain how translation extends from horizontal and vertical movement to movement along the z-axis, and name the CSS forms given for z translation.
Why it matters: The z-axis gives you a way to describe depth as well as movement across the page. - Three-Dimensional Rotation Axes: Distinguish rotation around the x, y, and z axes, including how rotate() relates to rotateZ() and how the rotate property names an axis.
Why it matters: Naming the axis lets you predict which way a 3D rotation will turn an element.
Key terms: translate(), translateX(), translateY(), translateZ(), translate property, z dimension, rotate(), rotateX(), rotateY(), rotateZ()
16.4.1 Controlling perspective
This section explains how perspective gives 3D transforms visible depth and how to apply it to individual elements or a shared scene.
- Perspective and visible depth: Explain how perspective changes the appearance of a 3D transform: nearer parts appear larger, farther parts appear smaller, and a shorter perspective distance makes the effect stronger.
Why it matters: Perspective is what makes a tilted element look as though it has depth instead of merely looking squashed. - Individual versus shared perspective: Distinguish a perspective() transform on each element from the perspective property on a common ancestor, including how the four-box example looks in each case.
Why it matters: The choice determines whether elements look like separate 3D views or parts of one scene. - Perspective transform ordering: State where perspective() must be listed among transform functions and why individual transform properties pose a problem with it.
Why it matters: The order of transform functions affects whether perspective produces the intended result.
Key terms: perspective, 3D scene, perspective distance, perspective() transform, perspective property, common ancestor, vanishing point, perspective(), transform declaration, individual transform properties
16.4.2 Implementing advanced 3D transforms
This section explains three CSS properties that refine how 3D-transformed elements are viewed and rendered.
- Perspective origin and viewpoint: Explain how perspective-origin changes the apparent camera position and how perspective distance affects the strength of the result.
Why it matters: It lets you control where a 3D scene appears to be viewed from. - Visibility of an element’s backface: Describe what appears when an element rotates away from the viewer and how backface-visibility: hidden changes that behavior.
Why it matters: Hiding backfaces makes effects such as a two-sided card flip possible. - Preserving nested 3D scenes: Explain why rotating the parent of a 3D scene can look flat and how transform-style: preserve-3d corrects it.
Why it matters: It prevents a nested 3D scene from looking like a flat picture when its parent rotates.
Key terms: perspective-origin, perspective, backface, backface-visibility: hidden, rotateY(), transform-style: preserve-3d, parent element, nested elements
16.5 Summary
Where this is used later
- Animation delay and fill mode (chapter 17) · Staggering transitions as a similar effect.
- Keyframes (chapter 17) · It informs the choice of properties to change in keyframe animations.
- Adding animation to the layout (chapter 17) · Using 3D transforms.
- Animating 3D transforms (chapter 17) · Animating 3D transforms builds on how perspective makes depth visible.
Concepts explained in this chapter
- CSS transform propertyA 3D transform is a geometric transformation that changes an element's position or orientation along the x, y, and z dimensions.
- translate functionThe CSS translate property applies independent positional displacement to an element along one or more axes.
- scaleA scale transform changes an element's rendered dimensions along one or more axes without changing its layout dimensions.
- transitionThe CSS transition property is a shorthand property for specifying animated interpolation, its duration, timing function, and delay.
- rotationA rotation is a geometric transformation that turns an object around a fixed point or axis.
- GPGPUGPU acceleration is rendering computation performed by a graphics processing unit instead of primarily by the central processor.
- animationAnimation is a time-varying visual change in a user interface that can communicate information or significance to the user.
- compositeComposite is the rendering stage that combines painted layers into the final displayed image in stacking order.
- layoutA page layout is the overall spatial arrangement of a web page's major sections and content regions.
- paintPaint is the rendering stage that draws visual content such as text, images, borders, and shadows into memory.
- paint layerA paint layer is an independently rendered layer containing painted portions of a page.
- reflowReflow is recomputation of document layout after a change affects the size or position of elements.
- renderingRendering is the process of converting computed document styles and content into pixels displayed on a screen.
- will-changeThe CSS will-change property provides advance information about properties expected to change on an element so the browser can optimize rendering.
- rotateX functionThe CSS rotateX() transform function rotates an element around the horizontal x-axis.
- perspectiveThe CSS perspective property establishes a shared perspective projection for transformed descendants of an element.
- perspective transformA perspective transform is the CSS transform function that applies a specified perspective projection to one element.
- fade inA fade-in transition gradually increases an element's visual opacity as it changes into its visible state.
- fixed positioningFixed positioning is a CSS positioning mode that removes an element from normal flow and positions it relative to the viewport or a containing block established for fixed positioning.
- hoverHover is the pointer-over state represented by the CSS :hover pseudo-class.
- navigationA navigation menu is an interface component containing links for moving among sections or destinations.
- timing functionA CSS timing function curve represents how the rate of change progresses over the duration of a transition or animation.
- cubic-bezier()The CSS cubic-bezier() function defines a timing function from the coordinates of two control points.
- transition delayA transition delay specifies how long to wait after a property value changes before starting its transition.
- emThe CSS em unit represents a length relative to a relevant font size, with font-size values based on the inherited font size and other properties based on the current element’s font size.
- opacityThe CSS opacity property specifies the compositing opacity of an element and its contents.
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.