Função scaleY

A função scaleY dimensiona um elemento no eixo Y. O dimensionamento é realizado em torno de um ponto, definido pela propriedade transform-origin. O valor da função é 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: scaleY(número);
}

Exemplo

Ao passar o mouse sobre o bloco, aumentaremos a escala em 1.5 vezes no eixo Y:

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

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

Результат:

Exemplo

Ao passar o mouse sobre o bloco, reduziremos 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: scaleY(0.5);
}

Результат:

Veja também