Recomendação de curso:

Função scale3d() do CSS

Definição e uso scale3d() A CSS define e usa

scale3d() A função define a escalonamento 3D do elemento.

scale3d() A função define os valores de escalonamento do elemento nas direções x, y e z. transform usado na propriedade.

Exemplo

Exemplo 1

Uso scale3d() Escala de múltiplos elementos <div>:

#myDiv1 {
  transform: scale3d(0.8, 0.8, 0.8);
}
#myDiv2 {
  transform: scale3d(-0.5, -0.5, -0.5);
}
#myDiv3 {
  transform: scale3d(1.1, 1.2, 1);
}

Experimente você mesmo

Exemplo 2

Uso scale3d() Escala da imagem:

#img1 {
  transform: scale3d(0.8, 0.8, 0.8);
}
#img2 {
  transform: scale3d(-0.5, -0.5, -0.5);
}
#img3 {
  transform: scale3d(1.1, 1.1, 1);
}

Experimente você mesmo

Sintaxe do CSS

scale3d(sx, sy, sz)
Valor Descrição
sx Número positivo ou negativo, define o vetor de escalonamento da largura.
sy Número positivo ou negativo, define o vetor de escalonamento da altura.
sz Número positivo ou negativo, define o vetor de escalonamento do eixo z.

Detalhes técnicos

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

Suporte do navegador

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

Chrome Edge Firefox Safari Ópera
12 12 10 4 15

Páginas relacionadas

Tutorial:Transformação 3D 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 scaleX()

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