Qiyshaytirish va matritsa
CSS skewX() funksiyasi
skewX() funksiyasi elementni X o‘qi bo‘ylab berilgan burchakka qiyshaytiradi.
Quyidagi misol <div> elementini X o‘qi bo‘ylab 20 daraja qiyshaytiradi:
CSS skewY() funksiyasi
skewY() funksiyasi elementni Y o‘qi bo‘ylab berilgan burchakka qiyshaytiradi.
Quyidagi misol <div> elementini Y o‘qi bo‘ylab 20 daraja qiyshaytiradi:
CSS skew() funksiyasi
skew() funksiyasi elementni X va Y o‘qlari bo‘ylab berilgan burchaklarga qiyshaytiradi.
Quyidagi misol <div> elementini X o‘qi bo‘ylab 20 daraja va Y o‘qi bo‘ylab 10 daraja qiyshaytiradi:
Agar ikkinchi parametr ko‘rsatilmagan bo‘lsa, uning qiymati nolga teng bo‘ladi. Shu sababli quyidagi misol <div> elementini X o‘qi bo‘ylab 20 daraja qiyshaytiradi:
CSS matrix() funksiyasi
matrix() funksiyasi barcha 2D transformatsiya funksiyalarini bittaga birlashtiradi.
matrix() funksiyasi matematik funksiyalardan iborat olti parametr qabul qiladi — bu elementlarni aylantirish, masshtablash, siljitish (translate) va qiyshaytirish imkonini beradi.
Parametrlar quyidagicha: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())
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!