Recomendação de curso:

Página anterior A função log() do CSS
Próxima página A função matrix3d() do CSS
Voltar para a camada superior Manual de Função CSS

Definição e uso da função matrix() do CSS

Definição e uso do CSS matrix() A função define uma transformação bidimensional por meio de uma matriz que contém seis valores.

matrix() A função aceita seis parâmetros, que permitem que você realize operações de rotação, escalonamento, movimento e torção no elemento.

Os parâmetros são os seguintes: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()).

Exemplo

Exemplo 1

Usar matrix() Defina transformações bidimensionais para vários elementos <div>:

#myDiv1 {
  transform: matrix(1, -0.3, 0, 1, 0, 50);
}
#myDiv2 {
  transform: matrix(1, 0, 0.5, 1, 50, 50);
}
#myDiv3 {
  transform: matrix(2, 1, 0.5, 1, 90, 70);
}

Experimente você mesmo

Exemplo 2

Usar matrix() Crie transformações bidimensionais para imagens:

#img1 {
  transform: matrix(1, -0.3, 0, 1, 0, 50);
}
#img2 {
  transform: matrix(1, 0, 0.5, 1, 50, 50);
}
#img3 {
  transform: matrix(2, 1, 0.5, 1, 90, 70);
}

Experimente você mesmo

Sintaxe do CSS

matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

Valor	Descrição
scaleX()	Obrigatório. Número, usado para escalar a largura do elemento.
skewY()	Obrigatório. Número (ângulo), usado para torcer ao longo do eixo Y.
skewX()	Obrigatório. Número (ângulo), usado para torcer ao longo do eixo X.
scaleY()	Obrigatório. Número, usado para escalar a altura do elemento.
translateX()	Obrigatório. Número, usado para mover o elemento ao longo do eixo X.
translateY()	Obrigatório. Número, usado para mover o elemento ao longo do eixo Y.