CSS scale property

Reference: Previous Page
Next Page @scope

Definition and Usage

scale The property allows you to change the size of the element.

scale The property defines the scaling ratio values in the x and y directions of the element. You can also define the scaling ratio in the z direction.

Scaling values can be one, two, or three values.

If one value is given, the scaling ratio in the x and y directions is the same.
If two values are given, the element is scaled in the x and y directions by the specified ratios.
If three values are given, the element is scaled in the x, y, and z directions by the specified ratios.

To better understand scale property, please seeDemonstration.

Note:Another technique to scale elements is to use the CSS scale() function of the CSS transform property. The CSS explained on this page scale The property can be said to be a simpler and more direct way to scale an element.

Example

Example 1

Change the size of the element:

div {
  scale: 2;
}

Try It Yourself

Example 2

When scale When the property is set to two values, the size is set on the x-axis and y-axis respectively. Here, the size of the element on the x-axis is doubled, and on the y-axis, it is halved:

div {
  scale: 2 50%;
}

Try It Yourself

CSS Syntax

scale: x-axis y-axis z-axis|initial|inherit;

Property Value

Value	Description
x-axis	Define the scaling ratio on the x-axis. Possible values: Number Percentage
y-axis	Define the scaling ratio on the y-axis. Possible values: Number Percentage
z-axis	Define the scaling ratio on the z-axis. Possible values: Number Percentage
initial	Sets this property to its default value. See initial.
inherit	Inherits this property from its parent element. See inherit.

Technical Details

Default Value:	none
Inheritance:	No
Animation Creation:	Supported. Please refer to:Animation-related Properties.
Version:	CSS3
JavaScript Syntax:	object.style.scale="2 0.7"