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
seletor {
transform: scaleY(número);
}
Exemplo
Ao passar o mouse sobre o bloco, aumentaremos a escala em 1.5
vezes no eixo Y:
<div id="elem">lorem ipsum</div>
#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:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scaleY(0.5);
}
:
