CSS scale Property
Description
The CSS scale
property allows you to resize an HTML element relative to its original size. It can be used to make elements larger or smaller, both horizontally and vertically. The scale
property can be used to create a variety of effects, such as zooming in on images, resizing text, or creating animation effects. It is also often used in responsive web design to ensure that elements are displayed correctly on devices of different sizes.
- Initial value
- none
- Applies to
- transformable elements
- Inherited
- no
- Computed value
- as specified
- Animatable
- a transform
- JavaScript syntax
- object.style.scale
Interactive Demo
Syntax
scale: none | x-axis y-axis z-axis
Values
- noneSpecifies that no scaling should be applied.
- x-axisDefines scale factor at the x-axis. Possible values: number, percentage
- y-axisDefines scale factor at the y-axis. Possible values: number, percentage
- z-axisDefines scale factor at the z-axis. Possible values: number, percentage
Example
<div class="box" id="box1">single value</div>
<div class="box" id="box2">two values</div>
.box {
float: left;
margin: 1em;
width: 7em;
line-height: 7em;
text-align: center;
transition: 0.5s ease-in-out;
border: 3px dotted;
}
#box1:hover {
scale: 1.25;
}
#box2:hover {
scale: 1.25 0.75;
}
Browser Support
The following table will show you the current browser support for the CSS scale
property.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
104 | 104 | 72 | 90 | 14.1 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
104 | 79 | 71 | 14.5 | 20 | 140 |
Last updated by CSSPortal on: 3rd January 2024