Transform — translate, rotate, scale, skew

~20 daq · CSS · Animatsiya va Ilg'or mavzular

Muammodan boshlaylik

28-darsda bildik: width, top, margin ni animatsiyalash — sekin, telefonda qotadi. Lekin kartochkani ko'tarish, tugmani kattalashtirish, yon panelni chiqarish, ikonkani aylantirish kerak.

Buning uchun transform — elementni ko'rinishda siljitish, aylantirish, kattalashtirish va qiyshaytirish. Eng muhimi: u joylashuvga ta'sir qilmaydi — boshqa elementlar hech narsani sezmaydi, va brauzer uni GPU da arzon chizadi.

Asosiy g'oya: joylashuvga ta'sir qilmaydi

.box {
  transform: translateX(100px);
}

Element ekranda 100px o'ngga siljidi, lekin oqimdagi joyi o'zgarmadi — qo'shnilar u hali eski joyda turgandek joylashadi. 23-darsdagi position: relative + left ga o'xshash, lekin:

  • Layout qayta hisoblanmaydi — tez
  • Kasr piksellarda silliq harakat
  • Rotatsiya, masshtab va boshqa effektlar bilan birlashtiriladi

translate — siljitish

transform: translateX(20px);        /* gorizontal */
transform: translateY(-8px);        /* vertikal (manfiy — yuqoriga) */
transform: translate(20px, -8px);   /* ikkalasi */

Foizlar — elementning o'z o'lchamiga nisbatan (otaga emas, 11-dars):

transform: translateX(-100%);   /* o'z kengligi qadar chapga — to'liq yashirish */

Yon panel (drawer):

.drawer {
  position: fixed;
  inset: 0 auto 0 0;
  width: 300px;
  transform: translateX(-100%);         /* ekrandan tashqarida */
  transition: transform 300ms ease-out;
}

.drawer.open {
  transform: translateX(0);             /* sirpanib chiqadi */
}

Klassik markazlash (Flexbox gacha)

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

top/left: 50% — elementning chap yuqori burchagini o'rtaga qo'yadi; translate(-50%, -50%) uni o'z o'lchamining yarmi qadar orqaga suradi. Hozir Flexbox/Grid bilan osonroq (17, 19-darslar), lekin absolute element uchun hali ham ishlatiladi.

scale — masshtab

transform: scale(1.05);        /* 5% kattaroq */
transform: scale(0.95);        /* bosilganda biroz kichrayish */
transform: scaleX(-1);         /* gorizontal oyna aksi */
transform: scale(1.2, 0.8);    /* X va Y alohida */

.btn {
  transition: transform 100ms;
}

.btn:active {
  transform: scale(0.97);     /* "bosildi" hissi */
}

[!INFO] scale faqat ko'rinishni kattalashtiradi — element egallagan joy o'zgarmaydi. Kattalashgan element qo'shnilarining ustiga tushishi mumkin (z-index — 24-dars). Shuning uchun kattalashtirish uchun kichik qiymatlar (1.02–1.1) ishlatiladi.

rotate — aylantirish

transform: rotate(45deg);       /* soat mili bo'yicha */
transform: rotate(-90deg);      /* teskari */
transform: rotate(0.5turn);     /* yarim aylanish = 180deg */

Akkordeon o'qi:

.chevron {
  transition: transform 200ms;
}

details[open] .chevron {
  transform: rotate(180deg);
}

Yuklanish spinneri (30-darsdagi @keyframes bilan):

.spinner {
  animation: aylanish 1s linear infinite;
}

@keyframes aylanish {
  to { transform: rotate(1turn); }
}

skew — qiyshaytirish

transform: skewX(-10deg);
transform: skew(10deg, 5deg);

Kamdan-kam: dinamik bezaklar, qiyshiq fon chiziqlari. Matnli elementlarga ishlatilsa matn ham qiyshayadi — ko'pincha faqat fon pseudo-elementiga (::before) beriladi.

Birlashtirish — tartib muhim

Bir nechta transformatsiya — bo'shliq bilan, o'ngdan chapga qo'llanadi:

transform: translateX(100px) rotate(45deg);
transform: rotate(45deg) translateX(100px);    /* boshqa natija! */

translateX(100px) rotate(45deg):        rotate(45deg) translateX(100px):
avval aylanadi, keyin o'ngga siljiydi     avval o'q 45° buriladi, keyin
                                          shu burilgan o'q bo'ylab siljiydi
     ◆ →→→→→ ◆                                ◆
                                                 ↘
                                                    ↘ ◆

Har bir transformatsiya element bilan birga koordinata o'qlarini ham o'zgartiradi.

Alohida xususiyatlar — zamonaviy usul

.card {
  translate: 0 -4px;
  scale: 1.02;
  rotate: 2deg;
}

Alohida translate, scale, rotate xususiyatlari — barcha zamonaviy brauzerlarda. Afzalligi: hover da faqat bittasini o'zgartirish boshqalarini o'chirib yubormaydi:

.icon       { rotate: 45deg; }
.icon:hover { scale: 1.2; }        /* rotate saqlanadi */

/* transform bilan esa: */
.icon       { transform: rotate(45deg); }
.icon:hover { transform: scale(1.2); }    /* rotate YO'QOLDI — butun qiymat almashadi */

transform-origin — aylanish nuqtasi

Standart — element markazi:

.door {
  transform-origin: left center;    /* chap chet bo'yicha — eshik kabi ochiladi */
  transition: transform 400ms;
}

.door:hover {
  transform: rotateY(-30deg);
}

.dropdown {
  transform-origin: top;            /* tepadan ochiladi */
  transform: scaleY(0);
  transition: transform 200ms ease-out;
}

.dropdown.open {
  transform: scaleY(1);
}

Qiymatlar: top, left, center, foizlar (0% 100%), uzunliklar.

3D transformatsiyalar

.scene {
  perspective: 800px;              /* "kamera" masofasi — kichik qiymat = kuchli effekt */
}

.card {
  transition: transform 600ms;
  transform-style: preserve-3d;
}

.card:hover {
  transform: rotateY(180deg);      /* kartochka aylanadi */
}

.card .back {
  transform: rotateY(180deg);
  backface-visibility: hidden;     /* orqa tomoni ko'rinmasin */
}

rotateX, rotateY, translateZ — chuqurlik effektlari: aylanadigan kartochkalar, 3D galereyalar. Interfeyslarda kamdan-kam va ehtiyotkorlik bilan.

Amaliy: hover effekti bo'lgan kartochka

.card {
  transition:
    translate 250ms ease-out,
    box-shadow 250ms ease-out;
}

.card:hover {
  translate: 0 -6px;
  box-shadow: 0 16px 32px rgb(0 0 0 / 0.12);
}

.card img {
  transition: scale 400ms ease-out;
}

.card:hover img {
  scale: 1.05;
}

.card .img-wrap {
  overflow: hidden;                /* kattalashgan rasm chegaradan chiqmasin (10-dars) */
  border-radius: 12px;
}

Nima uchun shunday?

Nima uchun transform joylashuvga ta'sir qilmaydi — elementni siljitganda qo'shnilar ham surilishi mantiqiyroq emasmi?

Aynan shu "ta'sir qilmaslik" uni tez va oldindan aytib bo'ladigan qiladi. Agar transform joylashuvni o'zgartirsa, har bir animatsiya kadrida (sekundiga 60 marta) brauzer butun sahifaning layoutini qayta hisoblashi kerak edi — qo'shnilar, ularning bolalari, scroll balandligi. transform esa elementni allaqachon chizilgan "rasm" (qatlam) sifatida GPU da shunchaki siljitadi yoki aylantiradi — xuddi stol ustidagi qog'ozni surish kabi. Shuning uchun hover da kartochka ko'tarilganda yonidagilar "sakramaydi", va telefonda ham animatsiya silliq. Joylashuvni o'zgartirish kerak bo'lsa — bu animatsiya emas, layout vazifasi.

Xulosa

Eslab qoling:

  • transform — ko'rinishni o'zgartiradi, joylashuvga ta'sir qilmaydi, GPU da tez
  • translate(x, y) — siljitish; % — elementning o'z o'lchamidan
  • scale() — masshtab (1.02–1.1); rotate() — aylantirish (deg, turn); skew() — qiyshaytirish
  • Bir nechtasi — o'ngdan chapga qo'llanadi, tartib natijani o'zgartiradi
  • Alohida translate, scale, rotate xususiyatlari — bir-birini o'chirmaydi
  • transform-origin — aylanish nuqtasi
  • translate(-50%, -50%) — absolute elementni markazlash
  • 3D: perspective, rotateY, backface-visibility

Keyingi dars

30-dars: Animation — @keyframes, animation xususiyatlari