Cursos optativos

Recomendação de curso:

Função scaleX() do CSS scaleX() Definição e uso do CSS

scaleX() A função é usada para ajustar horizontalmente a largura do elemento.

scaleX() A função adiciona ou diminui a largura do elemento. transform usado na propriedade.

Exemplo

Exemplo 1

Usar scaleX() Ajuste a largura de várias <div> elementos de escala:

#myDiv1 {
  transform: scaleX(0.7);
}
#myDiv2 {
  transform: scaleX(90%);
}
#myDiv3 {
  transform: scaleX(1.1);
}

Experimente você mesmo

Exemplo 2

Usar scaleX() Ajuste a largura da imagem de escala:

#img1 {
  transform: scaleX(0.6);
}
#img2 {
  transform: scaleX(90%);
}
#img3 {
  transform: scaleX(-0.6);
}
#img4 {
  transform: scaleX(1.1);
}

Experimente você mesmo

Sintaxe do CSS

scaleX(s)
Valor Descrição
s Obrigatório. Especifica o número da escala da direção da largura.

Detalhes técnicos

Versão: Módulo de Transforms do CSS Level 1

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta plenamente essa função pela primeira vez.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

Páginas relacionadas

Tutorial:Transformação 2D CSS

Referência:A propriedade CSS transform

Referência:A propriedade CSS scale

Referência:A função CSS scale()

Referência:A função CSS scale3d()

Referência:A função CSS scaleY()