translate, rotate, scale
Separate properties for a shift, a rotation and scaling — instead of functions in `transform`.
Syntax
translate: x y; rotate: angle; scale: factor;Values
| Parameter | Type | Description |
|---|---|---|
| translate | length | A shift: `translate: 10px 20px`. |
| rotate | angle | A rotation: `rotate: 45deg`. |
| scale | number | Scaling: `scale: 1.2`. |
Examples
Rotation and scaling animated independently:
<style>
.icon { display: inline-block; font-size: 32px; transition: rotate 0.3s, scale 0.3s; }
.icon:hover { rotate: 90deg; scale: 1.3; }
</style>
<span class="icon">⚙</span> Hover over the gearNotes
Each property can be changed and animated on its own without repeating the others, which is awkward with a single transform. They are applied in the order translate, rotate, scale, then transform. Supported in all current browsers.
See also
- transform — Moves, rotates, scales or skews an element without affecting the layout around it.
- transition — Animates the change of a property from the old value to the new one.
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.