transform
Moves, rotates, scales or skews an element without affecting the layout around it.
Syntax
transform: function() …;Values
| Parameter | Type | Description |
|---|---|---|
| translate() | function | A shift: `translate(10px, 20px)`, `translateY(-50%)`. |
| rotate() | function | A rotation: `rotate(45deg)`. |
| scale() | function | Scaling: `scale(1.2)`. |
| skew() | function | A skew: `skew(10deg)`. |
Examples
Four basic transforms:
<style>
div { display: inline-block; width: 70px; padding: 10px; margin: 16px; background: lightskyblue; }
</style>
<div style="transform: rotate(15deg);">rotate</div>
<div style="transform: scale(1.3);">scale</div>
<div style="transform: translate(10px, 10px);">translate</div>
<div style="transform: skew(-10deg);">skew</div>Several functions in one value are applied from right to left:
<div style="width: 120px; padding: 10px; background: gold; transform: translateX(20px) rotate(-5deg);">Two functions</div>Notes
A transformed element keeps its place in the flow — neighbors do not move. The point the element rotates and scales around is set by transform-origin (the center by default). For a single function, the separate properties translate, rotate and scale are handier.
See also
- translate, rotate, scale — Separate properties for a shift, a rotation and scaling — instead of functions in `transform`.
- transition — Animates the change of a property from the old value to the new one.
- animation — Runs a `@keyframes` animation on an element.
Related recipes
In the tutorial
- Transforms — The transform property — moving, rotating, scaling and skewing an element, the transform-origin pivot and the separate translate, rotate and scale properties.