Função scale

A função scale dimensiona um elemento: aumenta ou reduz seu tamanho em várias vezes. O dimensionamento é realizado em torno do ponto definido pela propriedade transform-origin.

Pode receber um ou dois parâmetros, listados separados por vírgula. Se houver dois parâmetros - o primeiro parâmetro define o dimensionamento horizontal, e o segundo - o vertical. Se houver apenas um parâmetro, ele define o dimensionamento horizontal e vertical simultaneamente.

O valor dos parâmetros é um número inteiro ou fracionário. Se for maior que 1 - o elemento aumenta, se for menor (por exemplo, 0.5) - o elemento diminui. Se for definido como 1 - nada muda (este é o valor padrão).

Sintaxe

cssseletor {
  transform: scale(um ou dois números);
}

Exemplo

Ao passar o mouse sobre o bloco, aumentaremos a escala em 1.5 vezes em ambos os eixos:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scale(1.5);
}

Результат:

Exemplo

Vamos reduzir a escala em 2 vezes em ambos os eixos:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scale(0.5);
}

Результат:

Exemplo

Vamos aumentar a escala em 2 vezes no eixo X:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scale(2, 1);
}

Результат:

Exemplo

Vamos aumentar a escala em 2 vezes no eixo Y:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scale(1, 2);
}

Результат:

Veja também