CSS Properties Index   Positioning Properties

---

Changes the size of an element.

CSS	{ scale: none | number | percentage ( 1~3 ) }
Script	object.style.scale = none | number | percentage ( 1~3 )

Parameter	Description	Valid Values
none	Specifies that no scaling should be applied.	the keyword none
single value	Specifies the scale factor for both the X and Y axes.	Floating-point number or percentage.
two values	Specifies the individual scale factor along the X and Y axes.	Floating-point number or percentage.
three values	Specifies the individual scale factor for the X, Y and Z axes.	Single floating-point number or percentage.

The property is read/write with a default value of none; this attribute is not inherited.

The scale property allows changing the dimension of elements.

scale may be specified as either the keyword value none or as one to three scale factor values, separated by spaces.

Values of more than 1 ( >100% ) make the element grow. Values of less than 1 ( <100% ) make the element shrink.

scale: 1.5	scale: 0.5

A negative value of -1 inverts or flips the object. A negative value more than -1 scales and inverts the object.

scale: -1	scale: -1.5

Each value specifies a scale along one axis, in the order X, Y, then Z.

A single value is interpreted as the scaling factor for both the X and Y axes. If the Y value is not given, it defaults to the same value as the X value.

element { scale: 1.25 }

scale: 1.25	scale: 175%

Two values will scale the element along the X and Y axes independently, equivalent to using the transform: scale( ) function.

element { scale: 1.5 2 }

scale: 1.5 2	scale: 2 1.5

Three values will scale the element along the X, Y, and Z axes independently, equivalent to using the transform: scale3d( ) function.

element { scale: 1.5 2 3 }

NOTE: 3D scaling will work only on 3D objects. The Z value is ignored for 2D objects.

Here is an example that shows the effects of applying 3D scaling using the transform: scale3d( ) function instead, but which is functionally equivalent.

 Show me 

scale in most cases is implemented with a transition to better illustrate the gradual transformation, unless an instantaneous or fixed change is desired, as in an abrupt zoom in or out.

The following example demonstrates the effects of passing different values to the scale property. Note that the effect will revert back to normal after 2 seconds, to default to the initial state.

Notice also the use of a simple transition to better visualize the changes.

Run Sample | View Source

rotate, transform, translate