rotate
Ta’rif va qo‘llanilishi
rotate xususiyati elementlarni aylantirish imkonini beradi.
rotate xususiyati element z o‘qi atrofida soat mili yo‘nalishida qanchalik aylantirilishini belgilaydi. Elementni x yoki y o‘qi atrofida yoki boshqa usullarda aylantirish uchun buni alohida belgilash kerak.
rotate xususiyati qiymatlari bitta burchak, o‘q nomi + burchak yoki uchta qiymat + burchak ko‘rinishida berilishi mumkin.
- Agar burchak berilsa, element z o‘qi atrofida soat mili yo‘nalishida aylantiriladi.
- Agar o‘q nomi + burchak berilsa, element shu berilgan o‘q atrofida soat mili yo‘nalishida aylantiriladi.
- Agar uchta qiymat + burchak berilsa, uchta qiymat element atrofida aylantiriladigan vektorni belgilaydi.
rotate xususiyatini yaxshiroq tushunish uchun namoyishni ko‘ring.
Eslatma: Elementni aylantirishning muqobil usuli — CSS transform xususiyatini CSS
rotate() funksiyasi bilan ishlatish.
| Standart qiymat: | none |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | ha. animatable haqida o‘qing Sinab ko‘ring |
| Versiya: | CSS3 |
| JavaScript sintaksisi: | object.style.rotate="-120deg" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| rotate | 104 | 104 | 72 | 14.1 | 90 |
CSS sintaksisi
rotate: axis angle|initial|inherit;
Xususiyat qiymatlari
| Xususiyat qiymati | Tavsif | Demo |
|---|---|---|
| axis | Ixtiyoriy. Agar o‘rnatilmagan bo‘lsa, standart holatda z o‘qi olinadi. Element atrofida aylantiriladigan o‘qni belgilaydi. Mumkin bo‘lgan qiymatlar:
|
Demo ❯ |
| angle | Element qanchalik aylantirilishini belgilaydi. Mumkin bo‘lgan birliklar:
|
Demo ❯ |
| vector angle | Uchta son element atrofida aylantiriladigan vektorni belgilaydi. Bu sonlar mos ravishda vektorning x, y va z koordinatalaridir. Oxirgi qiymat — qanchalik aylantirish kerakligini bildiruvchi burchak. Mumkin bo‘lgan qiymatlar:
|
Demo ❯ |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing | |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Ko‘proq misollar
Misol
rotate xususiyati vektor va burchak bilan o‘rnatilganda, element shu vektor atrofida aylantiriladi. Bu yerda vektor x va y koordinatalariga ega 2D tekislikdagi [1 1 0] bo‘lib, element 60 gradusga aylantiriladi:
div {
rotate: 1 1 0 60deg;
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS 2D transformatsiyalari
CSS darsligi: CSS 3D transformatsiyalar
CSS scale xususiyati: CSS scale xususiyati
CSS translate xususiyati: CSS translate xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!