Свойство CSS scale

Course recommendation:

scale Definition and usage

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

The attribute 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 ratio.

If three values are given, the element is scaled in the x, y, and z directions by the specified ratio. scale To better understandattribute, please see.

DemonstrationNote: Функция scale() в CSS Another technique to scale elements is to use the scale The attribute can be said to be a simpler and more direct way to scale the element. It is explained on the CSS transform attribute of this web page.

Example

Example 1

Change the size of the element:

div {
  scale: 2;
}

Try it yourself

Example 2

When scale When the attribute is set to two values, it sets the size on the x-axis and y-axis respectively. Here, the element's size on the x-axis becomes twice, and on the y-axis becomes half:

div {
  scale: 2 50%;
}

Try it yourself

CSS syntax

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

Attribute value

Technical details

Browser support

The numbers in the table represent the first browser version to fully support this property.

Related pages

Урок:CSS 2D Transformations

Урок:3D-трансформации CSS

См. также:Свойство CSS rotate

См. также:Свойство translate в CSS