Mafuta wa CSS scale

Course Recommendation:

scale Definition and Usage

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

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

• Scale 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 Please seeFor better understanding.

DemonstrationNote: Hisia CSS scale() fungu Another technique to scale elements is to use the scale The property can be said to be a simpler and more direct way to scale an element. It is explained on the CSS transform property of this webpage.

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, 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 it becomes half:

div {
  scale: 2 50%;
}

Try It Yourself

CSS Syntax

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

Property Value

Technical Details

Browser Support

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

Related Pages

Mafunzo:CSS 2D Transformations

Mafunzo:Hisia CSS 3D kuweka

Tazama:Mafuta wa CSS rotate

Tazama:Hisia CSS translate