CSS matrix3d() funktion

Definition og brug

CSS' matrix3d() Funktionen definerer en tredimensionel transformation ved hjælp af en 4x4-matrix, der indeholder 16 værdier:

Eksempel

Eksempel 1

Brug matrix3d() Definer en tredimensionel transformation for et <div>-element:

.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;
}

Prøv det selv

Eksempel 2

Brug matrix3d() Opret en tredimensionel transformation for et andet <div>-element:

.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);
}

Prøv det selv

CSS syntaks

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

Tekniske detaljer

Browserunderstøttelse

Tabelens tal angiver den første browserversion, der fuldt ud understøtter denne funktion.

Relaterede sider

Reference:CSS transform egenskab

Reference:CSS matrix() funktion

Tutorial:CSS 3D transformation