Corso raccomandato:

Funzione matrix3d() di CSS

Definizione e uso di CSS matrix3d() La funzione definisce una trasformazione tridimensionale utilizzando una matrice 4x4 che contiene 16 valori:

Esempio

Esempio 1

Usa matrix3d() Definire una trasformazione tridimensionale per un 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;
}

Prova tu stesso

Esempio 2

Usa matrix3d() Creare una trasformazione tridimensionale per un altro 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);
}

Prova tu stesso

Sintassi CSS

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

Dettagli tecnici

Supporto del browser

Tabella delle versioni di browser che supportano completamente la funzione.

Pagine correlate

Riferimento:Proprietà CSS transform

Riferimento:Funzione CSS matrix()

Tutorial:Trasformazioni 3D CSS