Xususiyatini o‘rganish

Bajaruvchi : Xolboyev Shoxruh

Mavzu: Transform xususiyatini o‘rganish

Trasform qila oladi:

• 
  aylantirmoq
  
• 
  siljish
  
• 
  o'zgartirmoq
  
• 
  kamaydi
  
• 
  yuqorida ko'rsatilgan harakatlarni birlashtiring
  

Ushbu mulk tufayli siz JavaScriptisiz qiziqarli effektlarni yaratishingiz mumkin, bu sizga brauzer ishini tezlashtirishga imkon beradi. Shuni ta'kidlash kerakki, vaqtincha kechikishlar bilan ta'sir qilish mumkin.

1. CSS o'zgaruvchan sintaksis

transformatsiya: Qayta o'zgartirish1 [Qayta o'zgartirish2];

Bir vaqtning o'zida bir vaqtning o'zida bir nechta harakatlar (masalan, aylantirish, siljitish, siljitish va o'zgartirish).

Brauzerlar haqida eslatma

Hamma brauzerlar o'zgarishlarni qo'llab-quvvatlamaydi. CSS sotuvchisi prefikslaridan foydalanish kerak:

• 
  -Ms-transform - IE9 va undan katta yoshdagi (to'qqizinchi versiyaning o'zgarishi ostida)
  
• 
  -Webkit-aylantiring - Chrome, Safari, Android va iOS uchun
  
• 
  -O-Tirish - Opera uchun 12.10 versiyasiga
  
• 
  - Firefox uchun 16.0 versiyasiga
  

2. Transform: aylantirish (x) - Ob'ektni aylantirish

Elementni aylantirish uchun, aylanish (x) buyrug'i mavjud. Bu sizga x daraja soat yoki soat miliga teskari tomonga burilish imkonini beradi. X qiymat diagramma darajasida belgilanishi kerak

1-misol. Transformatsiya orqali HTML-da ob'ektni aylantirish

Eslatma

Xususiyatlar:

-Ms-o'zgartiring: aylantirish (20deg); -Webkit-o'zgartiring: aylantirish (20deg); -O-TIRM: aylantirish: (20deg); -Moz-o'zgartirilishi: aylantirish (20deg);

Biz brauzerlarning eski versiyalarida to'g'ri ishlashimiz kerak. Quyidagi misollarda biz ularni ham yozamiz.