Abakada: Back to Basics > Language References > CSS Properties > Transform Functions > scale( ) Transform Function

---

Resizes a 2D element’s width and height.

CSS	{ transform: scale( X-number | X-percentage [ , Y-number | Y-percentage ] }
Script	object.style.transform = scale( X-number | X-percentage [ , Y-number | Y-percentage ]

Parameter	Description	Valid Values
X-number	Required. Specifies the scale factor for the element’s horizontal dimension ( width ).	Floating point number or percentage.
Y-number	Optional. Specifies the scale factor for the element’s vertical dimension ( height ).	Floating point number or percentage.

NOTE: If Y-number is not defined, its default value is equal to X-number ( width scale factor = height scale factor ).

The scale( ) CSS function defines a transformation that resizes the X ( horizontal ) and Y ( vertical ) dimensions of an element.

scale( ) may be specified with one or two values, which define the amount of scaling to be applied to an element’s width and height.

A single value is interpreted as the scale factor for both the X and Y axes. If the Y parameter is not provided, it takes a value equal to the X value, resulting in a uniform scaling that preserves the element’s aspect ratio.

element { transform: scale( 1.25 ) }

transform: scale( 1.25 )	transform: scale( 175% )

Two values, separated by a comma, will scale the element along the X and Y axes independently. In this situation, either of the width or height can specify a different scale factor.

element { transform: scale( 1.5, 2 ) }

transform: scale( 1.5, 2 )	transform: scale( 2, 1.5 )

Values of more than 1 ( >100% ) causes magnification of the element along the given dimension. Values of less than 1 ( <100% ) causes minification of the element.

transform: scale(1.75)	transform: scale(0.5)

A value of 1 leaves the input unchanged. A negative value results in a point reflection or an inversion.

A negative value of -1 essentially flips the object opposite a central point in the given dimension.

transform: scale( -1 )	transform: scale( 1, -1 )	transform: scale( -1, 1 )

A negative value less than -1 scales and inverts the object.

transform: scale( -1.5 )	transform: scale( 1, -1.75 )	transform: scale( -1.75, 1 )

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 illustrates the effects of applying different values to the scale( ) function.

 Show me 

For a brief overview, please see Understanding and Using CSS Transforms.

scale3d( ), scaleX( ), scaleY( ), scaleZ( )