Xususiyatini o‘rganish

4. Transform: shkala (x, y) - Ob'ektlar tarqalishi

Ob'ekt shkalasi (x, y) ni taqsimlash buyrug'i mos ravishda C va Y o'qlari ustiga o'lchash.

1-misol. HTMLda o'lchov ob'ektlari

Sahifa quyidagilarga aylantiriladi

Hovering paytida maydon gorizontaldan 50% ga (1,5) koeffitsientdan katta va vertikal ravishda 30% ga oshiradi (1.3 koeffitsienti). Qiymati 1 o'lchovni anglatmaydi. Bularning barchasi 1 dan kam narsa ob'ektning pasayishini anglatadi.

Eslatma

Agar siz faqat o'qlardan birini konvertatsiya qilishingiz kerak bo'lsa, siz ko'proq shaxsiy holatdan foydalanishingiz mumkin: Scalex (x) - X, Scaley (Y) - URAGING

5. Transform: Skew - Obuna

Skew (x, y) ga moyilligi uchun buyruq, qavatlar X varag'ida bo'lgan argumentlar bo'lgan argumentlar. Qiyalik diagramma darajalarida belgilanishi kerak.

6-misol. HTML-da arift

Sahifa quyidagilarga aylantiriladi

Hovering paytida maydon qiyalik tufayli rombga aylantiriladi.

Eslatma

Agar siz ekzatsiyani faqat o'qlar bilan qo'llashingiz kerak bo'lsa, siz ko'proq shaxsiy holatdan foydalanishingiz mumkin: Skewx (x) - X-da (y) burab.

6. Transform qiymatlarini birlashtirish

Birgalikda turli xil o'zgarishlarni birlashtirgan qiziqarli samaralarni ko'rib chiqish vaqti keldi. Biz zudlik bilan ob'ektni o'lchash (shkala), aylanish (aylantirish) va harakatlanishini (Tarjima) o'zgartirish uchun darhol uchta harakatni qo'llaymiz.

7-misol. Transformatsion qiymatlarni birlashtirish

Boshlang'ich qiymat: qora ramka bilan kvadrat. Siz uni kiyganingizda, qizil ramka bilan aylana bo'lib, rangni o'zgartiradi.

Sahifa quyidagilarga aylantiriladi

7. Boshqa o'zgartirish qiymatlari

Biz o'zgaruvchanlikning eng asosiy qadriyatlarini ko'rib chiqdik. Qolgan imkoniyatlarni ko'rib chiqing.

• 
  yo'q - hech qanday o'zgartirishlar (sukut bo'yicha yoqilgan);
  
• 
  matritsa (x, x, x, x, x, x) - bu 6 qadriyat yordamida 2D o'zgarishdir;
  
• 
  matrix3d \u200b\u200b(x, x, x, x, x, x, x, x, x, x, x, x) - 16 qiymat matritsasi yordamida 3D o'zgarishi;
  
• 
  translate3D (x, y, z) - 3D harakatlanish (odatdagi harakatga nisbatan yana bir uchinchi koordinatsiya qo'shilgan);
  
• 
  shkala3d (x, y, z) - 3D-ga taqqoslash (normal o'lchov bilan solishtirganda, bu erda yana bir uchinchi koordinatsiya qo'shilgan);
  
• 
  rotatie3d (x, y, z) - aylanishi 3D-da (odatdagi aylanish bilan solishtirganda, bu erda qo'shilgan boshqa uchinchi koordinata qo'shildi;
  
• 
  rotatex (x) - x o'q davomida 3D almashtirish;
  
• 
  rotation (x) - Y o'qi bo'ylab 3D almashtirish;
  
• 
  roteTz (x) - Z o'qi bo'ylab 3D almashtirish;
  
• 
  istiqbol (n) - 3D elementni almashtirish istiqbollari;
  
• 
  JavaScript-da CSS o'zgaruvchan mulki quyidagi xususiyatlarda mavjud:
  
• 
  ob'ektiv.stangract \u003d "Transformatsiya" hujjati ("Elementme"). Style.Transform \u003d ""
  
• 
  Siz savol berishingiz kerak bo'lishi mumkin "va nega siz bizga kerak bo'lganidek ob'ekt ma'lumotlarini o'zgartira olsangiz, qanday qilib foydalanish. Masalan, ob'ekt hajmini o'zgartirish kerakmi?" Farqi shundaki, o'zgarishda o'zgaruvchanlik xususiyatlari sahifaning boshqa elementlarini siljitmaydi. Ob'ekt kattaligi kabi oddiy o'zgarish bo'lsa, bu muqarrar ravishda qo'shni ob'ektlarning o'zgarishi bilan bog'liq, bu odatda xunuk.
  
• 
  Ba'zida noodatiy dizayn echimlari vestistni matnning joylashuvi joyida bir xil bo'lmagan namunaviy echimlarga murojaat qilishga majbur qiladi. Masalan, matn elementlaridan birini ma'lum bir burchakka aylantiring. Ushbu maqola ushbu vazifaning bir nechta sodda echimlarini ko'rib chiqadi.
  

•