3D perspektiva

CSS perspektiva

3D fazoni faollashtirish uchun elementga perspektiva kerak. Perspektiva foydalanuvchi ko‘rish nuqtasi va obyekt orasidagi masofani belgilaydi.

perspective: 200px; kabi kichik qiymat foydalanuvchi obyektga yaqin deb hisoblaydi va kuchli 3D effektni hosil qiladi.

perspective: 2000px; kabi katta qiymat foydalanuvchi obyektdan uzoq deb hisoblaydi va yumshoq 3D effektni hosil qiladi.

Perspektivasiz har qanday 3D transformatsiya tekis va ikki o‘lchamli ko‘rinadi.

Perspektivani ikki usulda qo‘shish mumkin:

perspective xossasi bilan
perspective() funksiyasi bilan

perspective xossasidan foydalanish

perspective xossasi har doim ota elementga qo‘yiladi va har bir bola element bir xil 3D fazoni baham ko‘radi.

Misol

.container {
width: 180px;
height: 180px;
border: 1px solid lightgray;
margin: 30px;
perspective: 500px; /* set perspective on parent element */
}

.box {
width: 100%;
height: 100%;
background-color: green;
transform: rotateY(45deg);
}

O‘zingiz sinab ko‘ring »

perspective() funksiyasidan foydalanish

perspective() funksiyasi yagona elementga to‘g‘ridan-to‘g‘ri 3D transformatsiya qo‘llash uchun ishlatiladi:

Misol

.container {
width: 180px;
height: 180px;
border: 1px solid lightgray;
margin: 30px;
}

.box {
width: 100%;
height: 100%;
background-color: green;
/* perspective function in transform property */
transform: perspective(500px) rotateY(45deg);
}

O‘zingiz sinab ko‘ring »

Yuqoridagi ikkala misol bir xil natijani beradi.

Lekin: perspective xossasini ota elementga qo‘ysangiz, har bir bola element bir xil 3D fazoni baham ko‘radi, perspective() funksiyasi esa yagona elementga to‘g‘ridan-to‘g‘ri 3D transformatsiya qo‘llash uchun ishlatiladi.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish