A propriedade CSS scale

Definição e uso

scale A propriedade permite que você altere o tamanho do elemento.

scale A propriedade define os valores de proporção de escala nas direções x e y. Você também pode definir a proporção de escala no eixo z.

Os valores de escala podem ser um valor, dois valores ou três valores.

• Se um valor for fornecido, a proporção de escala nas direções x e y é a mesma.
• Se dois valores forem fornecidos, o elemento é escalado nas direções x e y nas proporções especificadas.
• Se três valores forem fornecidos, o elemento é escalado nas direções x, y e z nas proporções especificadas.

Para entender melhor scale VejaDemonstração.

Atenção:Outra técnica para escalar elementos é usar o atributo Função scale() do CSS do atributo CSS transform. A explicação do CSS scale A propriedade é uma maneira mais simples e direta de escalar o elemento.

Exemplo

Exemplo 1

Alterar o tamanho do elemento:

div {
  scale: 2;
}

Experimente você mesmo

Exemplo 2

Quando scale Quando a propriedade é definida por dois valores, eles definem o tamanho no eixo x e y respectivamente. Aqui, o tamanho do elemento no eixo x é dobrado e no eixo y é reduzido pela metade:

div {
  scale: 2 50%;
}

Experimente você mesmo

Sintaxe do CSS

scale: eixo-x eixo-y eixo-z|initial|inherit;

Valor da propriedade

Detalhes técnicos

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta plenamente essa propriedade.

Páginas relacionadas

Tutorial:Transformações 2D do CSS

Tutorial:Transformação 3D CSS

Referência:A propriedade CSS rotate

Referência:Propriedade translate do CSS