Chapter 14 — CSS Transform

---

14.1 Asosiy Transform Funksiyalari

Example

styles.css
CSSNusxalash
01.translate { transform: translate(20px, 10px); }
02.scale { transform: scale(1.2); }
03.rotate { transform: rotate(45deg); }
04.skew { transform: skew(10deg, 0deg); }

14.2 Kombinatsiya va transform-origin

Example

styles.css
CSSNusxalash
01.combo { transform: translateX(20px) rotate(45deg) scale(1.1); }
02.origin { transform-origin: top left; transform: rotate(45deg); }

⚠️ Common Mistake
Bir nechta transform funksiyasini alohida-alohida CSS qatorlarida yozishga urinish — transform xususiyati BITTA qatorda barcha funksiyalarni birlashtirishi kerak, aks holda oxirgisi avvalgisini bekor qiladi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Elementga hover'da scale(1.05) beruvchi transition qo'shing.

🟡 Exercise 2 — Medium

Task: rotate() va transform-origindan foydalanib, soat strelkasi kabi aylanadigan element yarating.

🔴 Exercise 3 — Hard

Task: Karta flip (aylanish) effekti yarating — rotateY(180deg) va perspective xususiyatlari yordamida (old va orqa tomon bilan).

---

🐛 Debugging Challenge

styles.css
CSSNusxalash
01.box {
02  transform: translateX(50px);
03  transform: rotate(45deg);
04}

Your Task: Element nega faqat aylanadi, siljimaydi?

<details> <summary>Solution</summary> Ikkita alohida `transform` qatori yozilgan — CSS faqat OXIRGISINI (rotate) qo'llaydi, birinchisi (translateX) butunlay bekor bo'ladi. Yechim: bitta qatorda birlashtirish: `transform: translateX(50px) rotate(45deg);`. </details>

---

📌 Chapter Summary

transform — translate, scale, rotate, skew funksiyalarini o'z ichiga oladi, bitta xususiyatda birlashtirilishi kerak. transform-origin transformatsiya markazini belgilaydi, GPU-accelerated bo'lgani uchun performant.

🎯 Key Takeaways

• Bir nechta transform funksiyasini har doim BITTA qatorda birlashtiring
• translate() layout'ga ta'sir qilmaydi, positiondan performantroq
• transform-origin default markazdan (50% 50%) boshqa nuqtaga o'zgartirilishi mumkin

⚡ Quick Cheat Sheet

styles.css
CSSNusxalash
01transform: translate(x, y) scale(n) rotate(deg) skew(x, y);
02transform-origin: center | top left | <x> <y>;

---