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
seletor {
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:
<div id="elem">lorem ipsum</div>
#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:
<div id="elem">lorem ipsum</div>
#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:
<div id="elem">lorem ipsum</div>
#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:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(1, 2);
}
:
