Rekomendasi kursus:

Fungsi perspective() CSS

Definisi dan penggunaan perspective() CSS

perspective() Fungsi yang mendefinisikan jarak pengguna ke permukaan z=0. transform digunakan dalam properti.

contoh

Dengan perspective() Tambahkan beberapa efek perspektif untuk dua kubus:

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

Coba sendiri

Sintaks CSS

perspective(length|none)
Nilai Deskripsi
length Diperlukan. Tentukan jarak pengguna ke permukaan z=0. none berarti tidak melakukan transformasi.

Detil teknikal

Versi: Modul Transformasi CSS Level 2

Dukungan pereksa

Angka di dalam tabel menunjukkan versi pereksa pertama yang mendukung fungsi ini.

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

Halaman yang berhubungan

Panduan:Transformasi 3D CSS

Rujukan：Sifat transform CSS

Rujukan：Fungsi rotate() CSS

Rujukan：Fungsi rotate3d() CSS

Rujukan：Fungsi rotateX() CSS

Rujukan：Fungsi rotateY() CSS

Rujukan：Fungsi rotateZ() CSS