matrix()
CSS matrix() funksiyasi oltita qiymatdan iborat matritsa yordamida 2D transformatsiyani belgilaydi.
matrix() funksiyasi oltita parametr qabul qiladi, ular yordamida elementlarni burish, masshtablash, siljitish va qiyshaytirish mumkin.
Parametrlar quyidagicha: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()).
Misol
Bir nechta <div> elementi uchun 2D transformatsiyani belgilashda matrix() funksiyasidan foydalaning:
#myDiv1 {
transform: matrix(1, -0.3, 0, 1, 0, 50);
}
#myDiv2 {
transform: matrix(1, 0, 0.5, 1, 50, 50);
}
#myDiv3 {
transform: matrix(2, 1, 0.5, 1, 90, 70);
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar funksiyani to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Funksiya | |||||
|---|---|---|---|---|---|
| matrix() | 1 | 12 | 3.5 | 3.1 | 10.5 |
CSS sintaksisi
matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())
| Qiymat | Tavsif |
|---|---|
| scaleX() | Majburiy. Element kengligini masshtablaydigan son |
| skewY() | Majburiy. Transformatsiyani Y o‘qi bo‘ylab qiyshaytiradigan son (burchak) |
| skewX() | Majburiy. Transformatsiyani X o‘qi bo‘ylab qiyshaytiradigan son (burchak) |
| scaleY() | Majburiy. Element balandligini masshtablaydigan son |
| translateX() | Majburiy. Elementni X o‘qi bo‘ylab siljitadigan son |
| translateY() | Majburiy. Elementni Y o‘qi bo‘ylab siljitadigan son |
| Versiya: | CSS Transforms moduli, 1-daraja |
|---|
Ko‘proq misollar
Misol
Rasm uchun 2D transformatsiya yaratishda matrix() funksiyasidan foydalaning:
#img1 {
transform: matrix(1, -0.3, 0, 1, 0, 50);
}
#img2 {
transform: matrix(1, 0, 0.5, 1, 50, 50);
}
#img3 {
transform: matrix(2, 1, 0.5, 1, 90, 70);
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS ma’lumotnomasi: CSS transform xususiyati.
CSS ma’lumotnomasi: CSS matrix3d() funksiyasi.
CSS darsligi: CSS 2D transformatsiyalari.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!