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

cssseletor {
  transform: scaleX(número);
}

Exemplo

Ao passar o mouse sobre o bloco, aumentamos a escala em 1.5 vezes ao longo do eixo X:

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

css#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:

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

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

Результат:

Veja também