Recomendação de curso:

Função matrix3d() do CSS

Definição e uso do CSS matrix3d() A função define uma transformação tridimensional usando uma matriz 4x4 que contém 16 valores:

Exemplo

Exemplo 1

Usando matrix3d() Defina uma transformação tridimensional para um elemento <div>:

.div1 {
  transform: matrix3d(
    0.7, 0.1, 0.7, 0
    -0.6, 0.7, 0.2, 0
    -0.5, -0.8, 0.7, 0
    10, 10, 0, 1
  );
  font-size: 30px;
  font-weight: bold;
  width: 280px;
  padding: 10px;
  background: beige;
  font-family: verdana;
  border: 1px solid green;
}

Experimente você mesmo

Exemplo 2

Usando matrix3d() Crie uma transformação tridimensional para outro elemento <div>:

.div1 {
  font-size: 30px;
  font-weight: bold;
  width: 280px;
  height: 40px;
  padding: 10px;
  background: beige;
  font-family: verdana;
  border: 1px solid green;
  transform-style: preserve-3d;
  transition: transform 1.5s;
  transform: rotate3d(1, 1, 1, 30deg);
  margin: 50px auto;
}
.div1:hover {
.div1:focus {
  transform: rotate3d(1, 1, 1, 30deg);
  matrix3d(1, 0, 0, 0, 0, 1, 6, 0, 0, 0, 1, 0, 50, 100, 0, 1.1);
}

Experimente você mesmo

Sintaxe do CSS

matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)

Detalhes técnicos

Suporte do navegador

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

Páginas relacionadas

Referência:A propriedade CSS transform

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

Tutorial:Transformação 3D em CSS