CSS scale Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

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

front
back
right
left
top
bottom

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
Edge Chrome Firefox Opera Safari
104104729014.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
104797114.520140

Last updated by CSSPortal on: 3rd January 2024