Scale Property
Last updated: 2026-09-13
scale Scale Property
The scale property is an individual transform property that scales an element up or down in 2D or 3D space. As a standalone property it can be controlled separately from other transforms such as translate and rotate, which is especially useful when you want to animate scaling on its own — for button press feedback, image zoom previews, and similar interactions.
| Category | |
|---|---|
| Initial Value | none |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
scale: none | <number> [<number> [<number>]?]?;⚙️ Values
| Value | Type | Description |
|---|---|---|
none | Keyword | No scaling |
<number> | Type | The scale factor (x, y, z can be specified) |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| scale | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Supported in all major browsers | |||||
Tip： One value scales X and Y uniformly; two values control the X and Y axes independently; a third value also scales along Z (which needs a perspective to be visible).
Warning： A scale factor of 0 makes the element disappear completely; a negative value flips the element — for example, scale(-1) mirrors it.
❓ FAQ
QDoes the scale property affect an element's actual size and layout?
ANo. scale is purely visual: the element still occupies its original size and space in the document flow, and surrounding elements do not move. This is completely different from width and height, which also means a scaled element can overflow its container or cover adjacent content — handle the visual boundaries yourself.
QWhat is the difference between scale and changing width/height?
AChanging width or height changes the layout size, triggers reflow, and pushes surrounding elements away — with worse performance. scale only scales visually, does not affect layout, runs on a compositor layer rendered by the GPU, and animates smoothly. Use scale when you want animated magnification, and width/height when you genuinely need to change the layout size.
QWhat is the difference between the scale property and zoom in CSS?
Ascale is a standard CSS transform: it only changes the visual size, does not change layout space, animates on the compositor, and performs well. zoom is a non-standard property that also changes the element's real layout size and child rendering, affecting the document flow and triggering reflow. For cross-browser consistency and animation performance, scale is better — prefer it in production.
QHow do I flip an element as a mirror image with a negative scale?
AA negative factor flips the element along the corresponding axis: scale: -1 mirrors it horizontally along X (left-right reversed), and scale: 1 -1 flips it vertically along Y. Mirroring only affects the visual, not the layout. You can combine it with transitions or animations for a flip effect, but remember the text is mirrored too — if needed, fix it by composing several transforms.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
