CSS 2D transformatsiyalar
CSS 2D transformatsiyalari
CSS transform xossasi elementga 2D yoki 3D transformatsiya qo‘llaydi. Bu xossa elementlarni aylantirish, masshtablash, siljitish va qiyshaytirish imkonini beradi.
2D transformatsiyani ko‘rish uchun quyidagi element sichqonchasini ustiga olib boring:
CSS 2D transformatsiya funksiyalari
CSS transform xossasi bilan quyidagi 2D transformatsiya funksiyalaridan foydalanishingiz mumkin:
CSS translate() funksiyasi
translate() funksiyasi elementni joriy joylashuvidan siljitadi (X va Y o‘qlari uchun berilgan parametrlarga muvofiq).
Quyidagi misol <div> elementini joriy joylashuvidan o‘ngga 50 piksel va pastga 100 piksel siljitadi:
CSS rotate() funksiyasi
rotate() funksiyasi elementni berilgan darajaga qarab soat yo‘nalishida yoki unga qarshi aylantiradi.
Quyidagi misol <div> elementini soat yo‘nalishi bo‘yicha 20 daraja buradi:
Manfiy qiymatlar ishlatilsa, element soat yo‘nalishiga qarshi aylanadi.
Quyidagi misol <div> elementini soat yo‘nalishiga qarshi 20 daraja buradi:
CSS transformatsiya xossalari
Quyidagi jadval barcha 2D 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 |
CSS 2D transformatsiya funksiyalari
| Function | Tavsif |
|---|---|
| matrix() | Oltita qiymatdan iborat matritsa yordamida 2D transformatsiyani belgilaydi |
| translate() | Elementni X va Y o‘qi bo‘ylab harakatlantirib, 2D tarjimani belgilaydi |
| translateX() | Elementni X o‘qi bo‘ylab harakatlantirib, 2D tarjimani belgilaydi |
| translateY() | Elementni Y o‘qi bo‘ylab harakatlantirib, 2D tarjimani belgilaydi |
| scale() | Elementlarning kengligi va balandligini masshtablashtirib, 2D miqyosdagi transformatsiyani belgilaydi |
| scaleX() | Elementning kengligini masshtablovchi 2D masshtablash transformatsiyasini belgilaydi |
| scaleY() | Elementning balandligini masshtablovchi 2D masshtablash transformatsiyasini belgilaydi |
| rotate() | 2D aylanishni belgilaydi, burchak parametrda ko‘rsatilgan |
| skew() | X va Y o‘qi bo‘ylab 2D egilish transformatsiyasini belgilaydi |
| skewX() | X o‘qi bo‘ylab 2D qiyshaytirish (skew) transformatsiyasini belgilaydi |
| skewY() | Y o‘qi bo‘ylab 2D qiyshaytirish (skew) transformatsiyasini belgilaydi |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!