CSS perspective() fonksiyonu

Tanımlama ve Kullanım

CSS perspective() Kullanıcının z=0 düzlemi ile arasındaki mesafeyi tanımlar.

perspective() Fonksiyonu transform Özelliklerinde kullanılır.

Örnek

Kullanarak perspective() İki küp için bazı perspektif etkileri ekleyin:

.cube1 {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: perspective(5cm) rotateX(-15deg) rotateY(30deg);
}
.cube2 {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: perspective(10cm) rotateX(-15deg) rotateY(30deg);
}

Kişisel Deneyim

CSS Dil Grameri

perspective(length|none)
Değer Açıklama
length Gerekli. Kullanıcının z=0 düzlemine olan uzaklığını belirtir. none, değişiklik yapmaksızın anlamına gelir.

Teknik Ayrıntılar

Sürüm: CSS Transforms Module Level 2

Tarayıcı Desteği

Tablodaki rakamlar, bu fonksiyonu tamamen destekleyen ilk tarayıcı sürümünü gösterir.

Chrome Edge Firefox Safari Opera
perspective()
12 12 10 4 15
perspective(none)
97 97 93 15.4 83

İlgili Sayfalar

Eğitim:CSS 3D Çevirme

Referans:CSS transform özelliği

Referans:CSS rotate() fonksiyonu

Referans:CSS rotate3d() fonksiyonu

Referans:CSS rotateX() fonksiyonu

Referans:CSS rotateY() fonksiyonu

Referans:CSS rotateZ() fonksiyonu