CSS 2D Transforms

CSS 2D transform property’lari elementlarni tekislikda o‘zgartirish (burish, siljitish, kattalashtirish, kichraytirish va hokazo) imkonini beradi. Bu foydalanuvchilarga yanada interaktiv va chiroyli interfeys yaratishga yordam beradi.

Asosiy funksiyalar

1. translate(x, y)

Elementni gorizontal (x) va vertikal (y) bo‘ylab siljitadi.

.box {
  transform: translate(50px, 20px);
}

translateX(50px) va translateY(20px) ham ishlatiladi.

2. rotate(angle)

Elementni belgilangan burchakda aylantiradi.

.box {
  transform: rotate(45deg);
}

• Musbat qiymat → soat strelkasi bo‘yicha.
• Manfiy qiymat → soat strelkasiga qarshi.

3. scale(x, y)

Elementni kattalashtiradi yoki kichraytiradi.

.box {
  transform: scale(1.5, 2);
}

scaleX() va scaleY() ham mavjud.

• scale(1,1) → asl holat.
• scale(2,2) → 2 marta kattalashtirish.
• scale(0.5,0.5) → 50% kichraytirish.

4. skew(x-angle, y-angle)

Elementni qiya qilib ko‘rsatadi.

.box {
  transform: skew(20deg, 10deg);
}

skewX(20deg) yoki skewY(10deg) ishlatish mumkin.

5. matrix(a, b, c, d, e, f)

Bir nechta transform’larni bitta funksiya orqali qo‘llash imkonini beradi.

.box {
  transform: matrix(1, 0.5, -0.5, 1, 30, 20);
}

Formulasi:

matrix(scaleX, skewY, skewX, scaleY, translateX, translateY)

Transformlarni birlashtirish

Bir nechta transform’larni ketma-ket yozish mumkin.

.box {
  transform: translate(50px, 0) rotate(30deg) scale(1.2);
}

Tartib muhim! Avval translate, keyin rotate yozilsa natija boshqacha chiqadi.

Transform Origin

transform-origin bilan element qayerdan aylanishi yoki kattalashishini belgilaysiz.

.box {
  transform: rotate(45deg);
  transform-origin: top left;
}

Default qiymat: center center.

Amaliy misol

<div class="card">Hover qiling</div>

.card {
  width: 200px;
  height: 100px;
  background: lightblue;
  text-align: center;
  line-height: 100px;
  transition: transform 0.3s ease;
}
 
.card:hover {
  transform: rotate(5deg) scale(1.05);
}

Keng tarqalgan xatolar

1. Transform’larni noto‘g‘ri tartibda yozish.
2. Animatsiyada left/top o‘rniga translate ishlatmaslik → performance muammosi.
3. transform-origin ni unutish.

Amaliy maslahatlar

• Har doim transform bilan GPU optimizatsiya qilingan animatsiyalar yozing.
• Bir nechta transform’ni qo‘shishda tartibni test qilib ko‘ring.
• Hover effektlarda kichik scale va rotate foydalanuvchiga yoqimli interaktivlik beradi.

Yakuniy maslahat

2D transforms = oddiy CSS bilan powerful UI effektlar.