CSS scale Eigenschaft

Vorherige Seite row-gap
Nächste Seite @scope

Course Recommendation:

scale Definition and Usage

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

The property defines the scaling ratio values on the x and y axes of the element. You can also define the scaling ratio on the z-axis.

Scaling values can be one, two, or three values.
If one value is given, the scaling ratio on the x and y axes is the same.
If two values are given, the element is scaled on the x and y axes by the specified ratio.

If three values are given, the element is scaled on the x, y, and z axes by the specified ratio. scale To better understandProperty, please see.

DemonstrationNote: CSS scale() Funktion 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 as large, 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

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. See:Animation-related Properties.
Version:	CSS3
JavaScript Syntax:	object.style.scale="2 0.7"