CSS transform property
The CSS transform property applies two-dimensional or three-dimensional geometric transformations, such as translation, rotation, scaling, and skewing, to an element’s rendering.
CSS in Depth, Second Edition
A 3D transform is a geometric transformation that changes an element's position or orientation along the x, y, and z dimensions.
- How it is used
- Uses transforms to change elements’ apparent position or shape, particularly during UI transitions and animations.
- How deep it goes
- Works through basic functions, ordering, performance, 3D axes, and perspective using rendered examples.
- Examples
- Builds a rotated card, pressed button, sliding navigation labels, tilted boxes, and animated card grid.
- What you can do after
- Build it from scratch: combine ordered 2D and 3D transforms with perspective and motion effects.
Read how CSS in Depth, Second Edition explains CSS transform property →
Tiny CSS Projects
The CSS transform property changes an element's visual geometry without changing its position in normal document flow or the space allocated around it.
- How it is used
- Changes visible size or position for loader animations and interactive content without repositioning surrounding elements.
- How deep it goes
- Works through scaleY() keyframes, translateY() states, transform transitions, and transform-origin; defers a full list of transform functions.
- Examples
- Shows pulsing SVG loader rectangles, a card that reveals content on hover or focus, and a share link that enlarges.
- What you can do after
- Build it from scratch with CSS keyframes or transitions to animate visible size and position while preserving surrounding layout.
Read how Tiny CSS Projects explains CSS transform property →
D3.js in Action, Third Edition
The CSS transform property applies geometric transformations such as translation, rotation, or scaling to an element.
- How it is used
- Positions labels, badges, and chart grid elements while CSS transitions animate their movement.
- How deep it goes
- Demonstrates translated SVG groups, transition timing, and a Safari workaround without exploring transform mathematics or broader syntax.
- Examples
- Uses translated labels, framework badges, vertical grid lines, and a rankings visualization as implementation examples.
- What you can do after
- Operate CSS transforms and transitions to position and smoothly animate SVG chart elements in React components.
Read how D3.js in Action, Third Edition explains CSS transform property →
Related concepts
- transitionused by · A CSS transition interpolates changes in a CSS property’s computed value over time when that value changes.
- animationuses · Animation is the presentation of changing visual states over time to create the appearance of motion or change.
- CSSpart of · CSS, or Cascading Style Sheets, is a stylesheet language for specifying the presentation and layout of structured documents and user interfaces.
- translateY()has part · The CSS translateY() transform function moves an element vertically along the y-axis by a specified distance.
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.