Contoh
Mengatur perspektif dari mana unsur dilihat:
div
{
-webkit-perspective: 500px; /* Chrome, Safari, Opera */
perspective: 500px;
}
Cobalah sendiri " Definisi dan Penggunaan
Properti perspektif mendefinisikan berapa banyak piksel elemen 3D ditempatkan dari pandangan. Properti ini memungkinkan Anda untuk mengubah perspektif tentang bagaimana elemen 3D dilihat.
Ketika mendefinisikan properti perspektif untuk elemen, itu adalah unsur-unsur ANAK yang mendapatkan perspektif, TIDAK elemen itu sendiri.
Note: Properti perspektif hanya mempengaruhi unsur 3D berubah!
Tip: Gunakan properti ini bersama-sama dengan perspektif asal properti, yang memungkinkan Anda untuk mengubah posisi bawah elemen 3D.
Untuk lebih memahami properti perspektif, melihat demo .
| nilai default: | none |
|---|---|
| mewarisi: | no |
| animatable: | yes. Read about animatable Try it |
| Versi: | CSS3 |
| sintaks JavaScript: | object .style.perspective="50px" Try it |
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Nomor diikuti oleh -webkit- atau moz menentukan versi pertama yang bekerja dengan awalan.
| Milik | |||||
|---|---|---|---|---|---|
| perspective | 36.0 12,0 -webkit- | 10,0 | 16.0 10,0 moz | 9.0 4.0.3 -webkit- | 23.0 15,0 -webkit- |
CSS Syntax
perspective:length|none;Nilai properti
| Nilai properti | Deskripsi |
|---|---|
| length | Seberapa jauh unsur ini ditempatkan dari pandangan |
| tak satupun | nilai default. Sama seperti 0. perspektif tidak diatur |
| awal | Set properti ini ke nilai default. Baca tentang awal |
| mewarisi | Mewarisi properti ini dari elemen induknya. Baca tentang mewarisi |
Pages terkait
CSS tutorial: CSS 3D Transforms
Referensi HTML DOM: perspective property