1. Transform

transform — elementni aylantirish, kattalashtirish, siljitish yoki qiyshaytirishga imkon beradi. Qutining o'zi joyidan ko'chmaydi, faqat vizual ko'rinish o'zgaradi.

• translate(x, y) — siljitish (translateX, translateY).
• scale(x, y) — kattalashtirish/kichiklashtirish (scale(1.2) = 20% katta).
• rotate(deg) — aylantirish (rotate(45deg)).
• skew(x, y) — qiyshaytirish.

1.k1 { transform: translateY(-10px); }
2.k2 { transform: scale(1.2); }
3.k3 { transform: rotate(15deg); }
4.k4 { transform: translate(20px, -10px) rotate(5deg) scale(1.1); }

2. Transition

transition — bir qiymatdan boshqasiga o'tishni SILLIQ qiladi. Masalan, hover paytida rang yoki o'lcham silliq o'zgaradi.

1.tugma {
2  background: #2563eb;
3  transition: all 0.3s ease;
4}
5
6.tugma:hover {
7  background: #1e40af;
8  transform: translateY(-3px);
9}

• transition: xossa vaqt egri-chiziq kechikish;
• Xossa — qaysi xossa o'zgaradi (all, background, transform).
• Vaqt — 0.3s, 500ms.
• Egri-chiziq — ease, linear, ease-in-out.
• Kechikish — boshlanishidan oldingi kechikish.

3. calc() — matematik hisob

calc() — CSS ichida matematika! Qo'shish, ayirish, ko'paytirish va bo'lish mumkin. Eng foydalisi — turli o'lchov birliklarini aralashtirish.

1.konteyner {
2  width: calc(100% - 40px);      /* butun kenglikdan 40px ayrilgan */
3  height: calc(100vh - 60px);    /* oyna balandligidan navbar olib tashlangan */
4  padding: calc(1rem + 4px);     /* rem va px birga */
5  margin-left: calc(50% - 150px);
6}