--- title: scale() slug: Web/CSS/transform-function/scale() tags: - Função CSS - Referencia - Transformações CSS translation_of: Web/CSS/transform-function/scale() ---

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 {{cssxref("<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 {{cssxref("<number>")}} representando a abscissa do vetor de redimensionamento.
sy: Um {{cssxref("<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 ℝ²	Coordenadas homogêneas em ℝℙ²	Coordenadas cartesianas em ℝ³	Coordenadas homogêneas em ℝℙ³
$(\begin{matrix} sx & 0 \\ 0 & sy \end{matrix})$	$(\begin{matrix} sx & 0 & 0 \\ 0 & sy & 0 \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} sx & 0 & 0 \\ 0 & sy & 0 \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} sx & 0 & 0 & 0 \\ 0 & sy & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$
$(\begin{matrix} sx & 0 \\ 0 & sy \end{matrix})$	`[sx 0 0 sy 0 0]`

Exemplos

Redimensionando as dimensões X e Y juntas

HTML

<div>Normal</div>
<div class="scaled">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

{{EmbedLiveSample("Scaling_the_X_and_Y_dimensions_together", "200", "200")}}

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

HTML

<div>Normal</div>
<div class="scaled">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

{{EmbedLiveSample("Scaling_X_and_Y_dimensions_separately_and_translating_the_origin", "200", "200")}}

Compatibilidade de browser

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

Ver também

{{cssxref("transform")}}
{{cssxref("<transform-function>")}}
scale3d()