Windows apps
Collapse the table of content
Expand the table of content
Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

scale() function

Specifies a 2-D scale operation by the [sx,sy] scaling vector described by the two parameters.

CSS Transforms Module, Level 3, Section 13.1Internet Explorer 10

 

Syntax

scale

( <scaling-value-x> [ , <scaling-value-y> ])

Parameters

scaling-value-x

Numerical value by which to scale the specified element in the x-direction.

scaling-value-y

Optional. Numerical value by which to scale the specified element in the y-direction.

Standards information

Remarks

If the second parameter is not provided, it is takes a value equal to the first.

The function scale(1, 1) leaves the element unchanged, while scale(2, 2) causes it to appear twice as long in both the x- and y-axes, or four times its original size.

Examples

The following code snippet is an example of the scale function in use. When applied to a square blue div element, it has the effect illustrated in the image. (The light-blue square indicates the original position of the transformed element.)


div {    
  transform: scale(1.65, 0.6);
}

A square blue div with white text, after having the following transform function applied to it: transform: scale(1.65, 0.6);

Requirements

See also

Transform Functions
Mathematical Description of Transform Functions
Hands On: 2D Transforms

 

 

Show:
© 2017 Microsoft