CSS matrix3d() -funktio

Määrittely ja käyttö

CSS matrix3d() Funktiota käytetään määrittämään kolmiulotteinen muunnos 16:n arvon sisältävän 4x4-matriisin avulla:

Esimerkki

Esimerkki 1

Käytä matrix3d() Määritä kolmiulotteinen muunnos <div>-elementille:

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

Kokeile itse

Esimerkki 2

Käytä matrix3d() Luo kolmiulotteinen muunnos toiselle <div>-elementille:

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

Kokeile itse

CSS syntax

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

Tekninen yksityiskohta

Selaimen tuki

Taulukon numerot ilmaisevat ensimmäisen täysin tukevan selaimen version.

Liittyvät sivut

Viittaukset:CSS transform ominaisuus

Viittaukset:CSS matrix() funktio

Oppitunti:CSS 3D-muunnokset