xywh()
CSS xywh() funksiyasi o‘z ichiga olgan blokning x va y koordinatalaridan boshlanadigan, ko‘rsatilgan kenglik va balandlikka ega to‘rtburchak yaratish uchun ishlatiladi.
xywh() funksiyasini quyidagi kabi CSS xususiyatlarida ishlatishingiz mumkin:
Misol
Bu yerda element animatsiya davomida harakatlanadigan to‘rtburchak shaklidagi yo‘lni yaratish uchun offset-path ichida xywh() funksiyasidan foydalanamiz:
.path {
width: 45px;
height: 45px;
position: absolute;
background-color: green;
animation: move 8s linear infinite;
}
.xywh-path {
offset-path: xywh(10px 10px 100% 100%);
}
@keyframes move {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
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 | |||||
|---|---|---|---|---|---|
| xywh() | 119 | 119 | 122 | 17.2 | 105 |
CSS sintaksisi
xywh(x y width height round border-radius)
| Qiymat | Tavsif |
|---|---|
| x | Majburiy. Tayanch qutining chap chetidan masofa |
| y | Majburiy. Tayanch qutining yuqori chetidan masofa |
| width | Majburiy. To‘rtburchakning kengligi |
| height | Majburiy. To‘rtburchakning balandligi |
| round border-radius | Ixtiyoriy. Burchaklarni silliqlash uchun standart border-radius’dan foydalanadi |
| Versiya: | CSS Shapes moduli, 1-daraja |
|---|
Ko‘proq misollar
Misol
Bu yerda to‘rtburchak burchaklarini silliqlash uchun ixtiyoriy round border-radius qiymatini qo‘shdik:
.path {
width: 45px;
height: 45px;
position: absolute;
background-color: green;
animation: move 8s linear infinite;
}
.xywh-path {
offset-path: xywh(10px 10px 100% 100% round 20%);
}
@keyframes move {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!