Syntax
transform: translate() rotate() scale() skew();Examples
The Four Core Transform Functions
Moving, rotating, scaling, and skewing an element.
.move { transform: translate(20px, 10px); }
.rotate { transform: rotate(15deg); }
.grow { transform: scale(1.2); }
.skewed { transform: skew(-10deg, 0); }
/* Combining multiple transforms in one declaration */
.combined { transform: translateX(10px) rotate(5deg) scale(1.1); }transform-origin
Controlling the pivot point that rotation and scaling happen around.
.default-origin {
transform: rotate(45deg); /* pivots around the center by default */
}
.corner-origin {
transform-origin: top left;
transform: rotate(45deg); /* now pivots around the top-left corner instead */
}Parameters and values
- translate() (x, y): Moves the element without affecting document flow
- rotate() (angle): Rotates the element around its transform-origin
- scale() (x, y): Resizes the element proportionally or per-axis
- transform-origin (position): Sets the pivot point for rotation and scaling
Best practices
- Use transform: translate() instead of changing top/left for moving elements - transforms are GPU-accelerated and do not trigger layout recalculation
- Combine multiple transform functions in a single declaration rather than stacking multiple transform properties, since only the last one would apply
- Use scale() for hover effects instead of changing width/height directly, for smoother performance
- Remember transformed elements do not affect the layout of surrounding elements - the space they originally occupied stays reserved
At a glance
- Purpose
- Presentation and layout
- File extension
- .css
- Runs in
- Web browsers
- Usually used with
- HTML and JavaScript
Specifications & further reading
Related CSS documentation
Transitions
Transitions smoothly animate a property change over a specified duration, rather than the change happening instantly. They require a property to transition, a duration, and typically a timing function that controls the pace of the animation - useful for hover effects, state changes, and general UI polish.Animations & @keyframes
@keyframes defines a named sequence of styles at different points (0% to 100%) of an animation, which is then applied to an element via the animation property. Unlike transitions, which only animate between two states, keyframe animations can define arbitrarily complex multi-step sequences and loop indefinitely.Filters
The filter property applies graphical effects like blur, brightness, contrast, and grayscale directly to an element, similar to Photoshop-style filters. backdrop-filter applies the same effects to the area behind an element instead, commonly used for frosted-glass UI effects. Multiple filter functions can be chained together.Flexbox
Flexbox (Flexible Box Layout) is a powerful one-dimensional layout system in CSS that makes it easy to design flexible and responsive layouts. It provides an efficient way to distribute space and align items in a container, even when their sizes are unknown or dynamic. Flexbox is particularly useful for creating navigation bars, card layouts, and centering content.
Transitions smoothly animate a property change over a specified duration, rather than the change happening instantly. They require a property to transition, a duration, and typically a timing function that controls the pace of the animation - useful for hover effects, state changes, and general UI polish.Animations & @keyframes
@keyframes defines a named sequence of styles at different points (0% to 100%) of an animation, which is then applied to an element via the animation property. Unlike transitions, which only animate between two states, keyframe animations can define arbitrarily complex multi-step sequences and loop indefinitely.Filters
The filter property applies graphical effects like blur, brightness, contrast, and grayscale directly to an element, similar to Photoshop-style filters. backdrop-filter applies the same effects to the area behind an element instead, commonly used for frosted-glass UI effects. Multiple filter functions can be chained together.Flexbox
Flexbox (Flexible Box Layout) is a powerful one-dimensional layout system in CSS that makes it easy to design flexible and responsive layouts. It provides an efficient way to distribute space and align items in a container, even when their sizes are unknown or dynamic. Flexbox is particularly useful for creating navigation bars, card layouts, and centering content.