perspective
Ta’rif va qo‘llanilishi
perspective xususiyati foydalanuvchining kuzatish nuqtasi va obyekt orasidagi masofani belgilaydi.
perspective xususiyati 3D transformatsiya qilingan bola elementlarga ta’sir qilishi uchun ota elementga qo‘llanilishi kerak.
Kichik qiymat foydalanuvchini obyektga yaqin deb hisoblaydi va kuchli 3D effekt hosil qiladi. Katta qiymat esa foydalanuvchini obyektdan uzoqda deb hisoblaydi va yumshoq 3D effekt hosil qiladi.
Eslatma: perspective bo‘lmasa, har qanday 3D transformatsiya yassi va ikki o‘lchamli ko‘rinadi!
Misol
3D transformatsiya qilingan bola elementlarga ta’sir qilish uchun 3D fazo yarating:
.container1 {
perspective: 300px; /* Creates the 3D space */
}
.box1 {
transform: rotateY(45deg);
}
.container2 {
perspective: 2000px; /* Creates the 3D space */
}
.box2 {
transform: rotateY(45deg);
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
CSS sintaksisi
perspective: length|none;
| Xususiyat qiymati | Tavsif | Demo |
|---|---|---|
| length | Element ko‘rish nuqtasidan qanchalik uzoqda joylashishini belgilaydi | Demo ❯ |
| none | Standart qiymat. 0 bilan bir xil. Perspektiva o‘rnatilmaydi | Demo ❯ |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing | |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Rasmiy ta’rif
| Standart qiymat: | none |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | ha. animatable haqida o‘qing Sinab ko‘ring |
| Versiya: | CSS3 |
| JavaScript sintaksisi: | object.style.perspective="50px" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| perspective | 36 | 10 | 16 | 9 | 23 |
Ko‘proq misollar
Misol
Kub yarating va turli perspektivalarni o‘rnating:
.ex1 {
perspective: 800px;
}
.ex2 {
perspective: 150px;
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS ma’lumotnomasi: perspective-origin xususiyati
CSS darsligi: CSS 3D transformatsiyalar
HTML DOM ma’lumotnomasi: perspective xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!