CSS matrix3d() Fonksiyonu

Tanımı ve Kullanımı

CSS'nin matrix3d() Bu fonksiyon, 4x4 matrisi içeren 16 değeri kullanarak üç boyutlu dönüşüm tanımlar:

Örnek

Örnek 1

Kullanarak matrix3d() Bir <div> elementi için üç boyutlu dönüşüm tanımlayın:

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

Kişisel Deneyim

Örnek 2

Kullanarak matrix3d() Bir diğer <div> elementi için üç boyutlu dönüşüm oluşturun:

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

Kişisel Deneyim

CSS Grameri

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

Teknik Ayrıntılar

Tarayıcı Desteği

Tablodeki rakamlar, bu işlevi tam olarak destekleyen ilk tarayıcı sürümünü gösterir.

İlgili sayfalar

Referans:CSS transform özelliği

Referans:CSS matrix() fonksiyonu

Eğitim:CSS 3D Dönüşüm