Perspektif CSS Properti
Contoh
Berikan elemen yang diposisikan 3D beberapa perspektif:
#div1
{
perspective: 100px;
}
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
Properti perspective
ini digunakan untuk memberikan elemen posisi 3D beberapa perspektif.
Properti perspective
menentukan seberapa jauh objek dari pengguna. Jadi, nilai yang lebih rendah akan menghasilkan efek 3D yang lebih intensif daripada nilai yang lebih tinggi.
Saat mendefinisikan perspective
properti untuk sebuah elemen, elemen CHILD-lah yang mendapatkan tampilan perspektif, BUKAN elemen itu sendiri.
Tip: Lihat juga properti perspektif-asal , yang menentukan di posisi mana pengguna melihat objek 3D.
Untuk lebih memahami properti perspektif, lihat demo .
Nilai bawaan: | tidak ada |
---|---|
Diwarisi: | tidak |
Animasi: | Ya. Baca tentang animasi |
Versi: kapan: | CSS3 |
Sintaks JavaScript: | objek .style.perspective="50px" |
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Angka yang diikuti oleh -webkit- atau -moz- menentukan versi pertama yang berfungsi dengan awalan.
Property | |||||
---|---|---|---|---|---|
perspective | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0.3 -webkit- |
23.0 15.0 -webkit- |
Sintaks CSS
perspective: length|none;
Nilai properti
Property Value | Description |
---|---|
length | How far the element is placed from the view |
none | Default value. Same as 0. The perspective is not set |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Lebih Banyak Contoh
Contoh
Buat kubus dan atur perspektif yang berbeda:
.ex1 {
perspective: 800px;
}
.ex2 {
perspective: 150px;
}
Halaman Terkait
Tutorial CSS: Transformasi 3D CSS
Referensi DOM HTML: properti perspektif