CSS 3D transformatsiyalar
CSS 3D transformatsiyalari
CSS transform xossasi elementga 3D transformatsiya qo‘llash uchun ham ishlatiladi.
3D fazoni faollashtirish uchun elementga perspektiva kerak. Perspektiva foydalanuvchi ko‘rish nuqtasi va element orasidagi masofani belgilaydi. Perspektivasiz har qanday 3D transformatsiya tekis va ikki o‘lchamli ko‘rinadi.
Keyingi bobda siz Perspektiva haqida ko‘proq bilib olasiz.
Asosiy 3D transformatsiya funksiyalari
transform xossasi ichida quyidagi 3D funksiyalarni ishlatish odatiy holdir:
CSS rotateX() funksiyasi
rotateX() funksiyasi elementni x o‘qi atrofida berilgan darajaga aylantiradi.
Bunday holda element oldinga yoki orqaga egiladi:
CSS rotateY() funksiyasi
rotateY() funksiyasi elementni y o‘qi atrofida berilgan darajaga aylantiradi.
Bunday holda element chapga yoki o‘ngga buriladi (ochiluvchi eshik kabi):
CSS rotateZ() funksiyasi
rotateZ() funksiyasi elementni z o‘qi atrofida berilgan darajaga aylantiradi.
Bunday holda element ekran tekisligida aylanadi (berilgan darajada):
CSS translateZ() funksiyasi
translateZ() funksiyasi elementni 3D fazoda z o‘qi bo‘ylab qayta joylashtiradi.
Bunday holda element tomoshabinga yaqinlashtiriladi yoki uzoqlashtiriladi.
Musbat qiymat elementni tomoshabinga yaqinlashtiradi. Manfiy qiymat elementni tomoshabindan uzoqlashtiradi:
CSS transformatsiya xossalari
Quyidagi jadval barcha 3D transformatsiya xossalarini sanab o‘tadi:
| Xususiyat | Tavsif |
|---|---|
| transform | Elementga 2D yoki 3D o‘zgartirishni qo‘llaydi |
| transform-origin | O‘zgartirilgan elementlardagi pozitsiyani o‘zgartirishga imkon beradi |
| transform-style | 3D bo‘shliqda ichki joylashtirilgan elementlar qanday ko‘rsatilishini belgilaydi |
| perspective | Foydalanuvchi nuqtai nazari va element orasidagi masofani belgilaydi |
| perspective-origin | 3D elementlarning pastki holatini belgilaydi |
| backface-visibility | Element ekranga qaramaganda ko‘rinib turishi yoki ko‘rinmasligini belgilaydi |
Asosiy 3D transformatsiya funksiyalari
| Function | Tavsif |
|---|---|
| rotateX() | Elementni gorizontal o‘qi (x o‘qi) atrofida aylantiradi |
| rotateY() | Elementni vertikal o‘qi (y o‘qi) atrofida aylantiradi |
| rotateZ() | Elementni chuqurlik o‘qi (z o‘qi) atrofida aylantiradi |
| perspective() | Foydalanuvchi nuqtai nazari va element orasidagi masofani belgilaydi |
| translateZ() | Elementni yaqinlashtiradi yoki uzoqlashtiradi |
| scaleZ() | Elementning z o‘qi bo‘ylab chuqurligini masshtablaydi |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!