A funçãoCSSscale() define uma transformação que redimensiona um elemento no plano 2D. Como o redimensionamento é definido por um vetor, ele pode transformar as dimensões verticais e horizontais em escalas diferentes. Seu resultado é um dado do tipo<transform-function>.

Essa transformação de redimensionamento é caracterizada por um vetor bidimensional. Suas coordenadas definem o quanto cada direção deve ser redimensionada. Se as duas coordenadas forem iguais, o redimensionamento é uniforme (isotrópico) e a proporção do elemento é preservada (isto é umatransformação homotética).

Quando o valor de uma coordenada está fora do alcance [-1, 1], o elemento cresce ao longo daquela dimensão; quando está dentro, ele encolhe. Se for negativo, o resultado é umponto de reflexão naquela dimensão. O valor 1 não tem efeito.

Sintaxe

A funçãoscale() é especificada com um ou dois valores, que representam a quantidade de redimensionamento a ser aplicada em cada direção.

scale(sx)scale(sx, sy)

Valores

sx

Um<number> representando a abscissa do vetor de redimensionamento.

sy

Um<number> representando a ordenada do vetor de redimensionamento. Se não for definida, seu valor padrão ésx, resultando em um redimensionamento uniforme que preserva a proporção do elemento.

Exemplos

Redimensionando as dimensões X e Y juntas

HTML

<div>Normal</div><div>Redimensionado</div>

CSS

div {  width: 80px;  height: 80px;  background-color: skyblue;}.scaled {  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */  background-color: pink;}

Resultado

Redimensionando dimensões X e Y separadamente e transladando a origem

HTML

<div>Normal</div><div>Redimensionado</div>

CSS

div {  width: 80px;  height: 80px;  background-color: skyblue;}.scaled {  transform: scale(2, 0.5); /* Igual a scaleX(2) scaleY(0.5) */  transform-origin: left;  background-color: pink;}

Resultado

Compatibilidade com navegadores

Veja o dado do tipo<transform-function> para informações de compatibilidade.

Ver também

• transform
• <transform-function>
• scale3d()