Função scaleX
A função scaleX dimensiona um elemento
ao longo do eixo X. 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: scaleX(número);
}
Exemplo
Ao passar o mouse sobre o bloco, aumentamos a escala em 1.5
vezes ao longo do eixo X:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scaleX(1.5);
}
:
Exemplo
Ao passar o mouse sobre o bloco, reduzimos a escala em 2
vezes ao longo do eixo X:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scaleX(0.5);
}
:
