scale()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

A função CSS scale() 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 é uma transformaçã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 é um ponto de reflexão naquela dimensão. O valor 1 não tem efeito.

Nota: A função scale() apenas redimensiona em 2D Para redimensionar em 3D, use scale3d() ao invés.

Sintaxe

A função scale() é 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.

Coordenadas cartesianas em ℝ2 Coordenadas homogêneas em ℝℙ2 Coordenadas cartesianas em ℝ3 Coordenadas homogêneas em ℝℙ3
sx0 0sy sx000sy0001 sx000sy0001 sx0000sy0000100001
[sx 0 0 sy 0 0]

Exemplos

Redimensionando as dimensões X e Y juntas

HTML

html
<div>Normal</div>
<div class="scaled">Redimensionado</div>

CSS

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

html
<div>Normal</div>
<div class="scaled">Redimensionado</div>

CSS

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