Tarkibga o'tish

17 β€” Transition, transform va animatsiya

⬅️ Oldingi: 16 β€” Dark mode Β· 🏠 README Β· Keyingi: 18 β€” @theme bilan dizayn tizimi ➑️

Bu bobda: Sahifaga jonni harakat bilan beramiz. Transition (ikki holat orasidagi silliq o'tish: transition, duration-*, ease-*, delay-*), transform (2D β€” scale/rotate/translate/skew/origin, hamda v4'da yangi 3D β€” rotate-x/y/z, translate-z, perspective-*, backface-hidden), tayyor animatsiyalar (animate-spin/pulse/bounce/ping), custom animatsiya (@theme + @keyframes), elementlar paydo bo'lishi uchun @starting-style (starting: varianti), va eng muhimi β€” accessibility (motion-reduce:) bilan unumdorlik (GPU). Hover-lift karta, animatsiyali tugma, spinner, skeleton, flip-karta va xato bildiruvchi "wiggle" β€” barchasini quramiz.

17.1 Avval nega? β€” harakat ma'no tashiydi

Tugmaga sichqonchani olib borasiz, rang birdan sakrab o'zgaradi β€” biroz qo'pol, to'g'rimi? Endi xuddi shu rang yarim soniyada silliq o'zgarsin: ko'z uni "tugma menga javob berdi" deb o'qiydi. Mana shu farq β€” interfeysni qimmat va ishonchli his qildiradigan narsa.

Harakat bezak emas. U maydon e'tiborini boshqaradi ("bu yerga qara"), sababiy bog'liqlikni ko'rsatadi ("siz bosgani uchun bu ochildi"), va kutishni yumshatadi (spinner: "tizim ishlayapti, qotmadi"). Lekin haddan oshsa β€” sahifa o'yinchoqqa aylanadi va foydalanuvchini charchatadi. Shuning uchun butun bob davomida ikki o'lchovni yodda tutamiz: qisqa (UI uchun 150–300ms) va hurmatli (kim harakatni o'chirgan bo'lsa, unga tinch sahifa).

Toza CSS'da bularning hammasini transition, transform xossalari va @keyframes bilan yozardingiz β€” buni HTML & CSS kitobining transitions/transforms bobida ko'rgansiz. Tailwind hech narsani o'ylab topmaydi: u xuddi shu CSS xossalarini utility klasslarga o'rab beradi.

πŸ“Œ Atamalar. transition β€” element bir holatdan ikkinchisiga o'tganda o'zgarishni vaqt ichida interpolatsiya qilish. transform β€” elementni qayta chizmasdan vizual o'zgartirish (kattalashtirish, burish, surish). animation β€” @keyframes orqali belgilangan, o'zidan-o'zi (trigger kutmasdan) takrorlanadigan harakat. easing β€” o'tish tezligining vaqt bo'yicha "egri chizig'i" (tekismi, sekin boshlanadimi va h.k.).

17.2 Transition β€” silliq o'tishning retsepti

Transition o'zicha hech narsa qilmaydi. U faqat: "agar shu element biror xossasi o'zgarsa, uni birdan emas, vaqt ichida o'zgartir" deydi. Demak har doim uchta bo'lak kerak:

  1. Asos holat β€” element odatdagi ko'rinishi.
  2. O'zgargan holat β€” odatda bir variant: hover:, focus:, group-hover:, data-[state=open]: (15-bobdagi holat variantlari).
  3. transition β€” o'zgarishni animatsiyaga aylantiruvchi "kalit".
<button class="bg-indigo-500 text-white px-4 py-2 rounded-lg
               transition-colors duration-200 ease-out
               hover:bg-indigo-700">
  Bos meni
</button>

bg-indigo-500 β€” asos. hover:bg-indigo-700 β€” o'zgargan holat. transition-colors duration-200 ease-out β€” orani 200ms da, ease-out egri chizig'i bilan to'ldiradi. Agar transition-colors ni olib tashlasangiz, rang baribir o'zgaradi β€” lekin birdan, silliqliksiz.

Quyidagi rasm shu retseptni vaqt o'qida ko'rsatadi β€” A holat, B holat va orani to'ldiruvchi duration/delay/easing:

Transition vaqt chizig'i: holat A dan B ga duration va easing bilan o'tish

Qaysi xossani animatsiya qilamiz?

Utility Nimani o'tkazadi
transition eng keng tarqalganlar: rang, fon, border, opacity, shadow, transform, filter (asosiy to'plam)
transition-colors faqat rang xossalari (text/bg/border)
transition-opacity faqat shaffoflik
transition-transform faqat transform (scale/rotate/translate...)
transition-shadow faqat soya
transition-all hamma o'zgaruvchi xossa β€” ehtiyot bo'ling (pastga qarang)
transition-none o'tishni butunlay o'chiradi

⚠️ transition-all β€” tuzoq. U hamma xossani kuzatadi, shu jumladan siz xohlamaganlarini (masalan, layout o'zgargani sababli kelib chiqqan kenglik). Bu kutilmagan, sakrab-sakrab harakatlarga (jank) va keraksiz hisob-kitobga olib keladi. Faqat kerakli xossani tanlang: rang o'zgaryaptimi β€” transition-colors, transform o'zgaryaptimi β€” transition-transform. transition-all ni faqat haqiqatan ko'p narsa birga o'zgarganda, ataylab oling.

Davomiylik, easing, kechikish

<div class="transition-transform duration-300 ease-in-out delay-100 hover:scale-105">...</div>
  • duration-* β€” o'tish necha millisekund: duration-150, duration-200, duration-300, duration-500...
  • ease-* β€” tezlik egri chizig'i: ease-linear (bir tekis), ease-in (sekin boshlanadi), ease-out (sekin tugaydi β€” UI uchun eng tabiiy), ease-in-out (ikki uchi sekin).
  • delay-* β€” boshlashdan oldingi pauza: delay-100, delay-300...

πŸ’‘ Amaliy qoida. Interfeys o'tishlari uchun duration-150–duration-300 va ease-out deyarli har doim to'g'ri tanlov. Element foydalanuvchiga javob berayotgani uchun tez tugashi (ease-out) tabiiy his qilinadi. 500ms+ o'tishlar UI'ni "og'ir" qiladi β€” ularni faqat katta, ataylab effektlar uchun saqlang.

17.3 Transform 2D β€” surish, burish, kattalashtirish

Transform elementni qayta hisoblamasdan (layoutga tegmasdan) vizual o'zgartiradi β€” shuning uchun u arzon va silliq (buni 17.8'da ko'ramiz). Asosiy 2D utility'lar:

Guruh Misollar Ma'nosi
scale-* scale-95, scale-105, scale-110, scale-x-50 kattalashtirish/kichraytirish
rotate-* rotate-3, rotate-45, -rotate-12 burish (daraja)
translate-* translate-x-4, -translate-y-2, translate-x-1/2 surish
skew-* skew-x-6, skew-y-3 qiyshaytirish
origin-* origin-center, origin-top-left transform tayanch nuqtasi

Quyidagi rasm bitta kvadratni va uning to'rt xil transform qilingan ko'rinishini (asl o'rni soya bilan) yonma-yon qo'yadi:

Transform turlari: scale, rotate, translate, skew va 3D rotate-y

Eng mashhur naqsh: hover-lift karta

Kartani ustiga sichqoncha kelganda biroz ko'tarish + soyani kuchaytirish β€” bu deyarli har bir zamonaviy saytda bor:

<article class="rounded-xl bg-white p-6 shadow
                transition hover:-translate-y-1 hover:shadow-lg">
  <h3 class="font-bold">Karta sarlavhasi</h3>
  <p class="text-slate-600">Ustiga keling β€” yengilgina ko'tariladi.</p>
</article>

hover:-translate-y-1 β€” 0.25rem yuqoriga suradi (manfiy Y = yuqori). hover:shadow-lg β€” balandlik hissi uchun soyani kattalashtiradi (14-bobdagi elevation g'oyasi). transition ikkalasini ham silliq qiladi.

Markazlash eslatmasi

Transform'ning eng ko'p ishlatiladigan amaliy holatlaridan biri β€” markazlash. left-1/2 elementni chap chetidan markazga suradi, keyin -translate-x-1/2 uni o'z eni yarmiga teskari surib, aniq markazga qo'yadi:

<div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">Markazda</div>

Bosilganda kichrayuvchi tugma

active: varianti bilan tugma bosilganda biroz "ezilsa", tugma jismoniy his qilinadi:

<button class="rounded-lg bg-sky-500 px-4 py-2 text-white
               transition active:scale-95 hover:bg-sky-600">
  Bos
</button>

17.4 Transform 3D β€” v4'dagi yangi imkoniyat

v4 transformlarning uchinchi o'lchamini ham klasslarga olib chiqdi. 3D ishlashi uchun ota-elementda ikki narsa kerak:

  1. perspective-* β€” chuqurlik kuchini beradi (perspective-near, perspective-distant, yoki perspective-[800px]). Usiz 3D burilish "yassi" ko'rinadi.
  2. Bola elementda transform-3d β€” 3D transformlarni yoqadi.

So'ng bola elementda 3D utility'lar:

Utility Ma'nosi
rotate-x-*, rotate-y-*, rotate-z-* mos o'q bo'ylab burish
translate-z-* chuqurlik bo'ylab surish (yaqin/uzoq)
scale-z-* chuqurlik bo'yicha masshtab
perspective-origin-* qarash nuqtasi
backface-hidden / backface-visible element teskari aylanganda orqa yuzasini yashirish/ko'rsatish

Rasmdagi pastki qism aynan rotate-y bilan Y o'qi bo'ylab burilgan kartani ko'rsatadi.

Flip-karta (konseptual)

Klassik effekt: karta hover'da ag'darilib, orqa tomonini ko'rsatadi. G'oya β€” old va orqa yuzlarni bir-birining ustiga qo'yib, biri rotate-y-180 qilingan, ikkalasi ham backface-hidden. Ota-elementda perspective, hover'da butun ichki o'ramani ag'daramiz:

<!-- Ota: perspective beradi -->
<div class="group [perspective:1000px] h-56 w-44">
  <!-- O'ram: hover'da 180Β° ag'dariladi -->
  <div class="relative h-full w-full transition-transform duration-500 transform-3d
              group-hover:rotate-y-180">
    <!-- Old yuza -->
    <div class="absolute inset-0 backface-hidden rounded-xl bg-indigo-500 grid place-items-center text-white">
      Old
    </div>
    <!-- Orqa yuza: boshidanoq 180Β° aylantirilgan -->
    <div class="absolute inset-0 backface-hidden rotate-y-180 rounded-xl bg-slate-800 grid place-items-center text-white">
      Orqa
    </div>
  </div>
</div>

backface-hidden bo'lmasa, har ikki yuza bir vaqtda ko'rinib, effekt buziladi. group-hover: β€” 15-bobdagi group naqshi: ota ustiga kelinganda ichki element o'zgaradi.

πŸ“Œ Bu yerda [perspective:1000px] β€” arbitrary xossa. Tailwind'ning tayyor perspective-distant/perspective-near shkalasini ham ishlatsangiz bo'ladi; aniq qiymat kerak bo'lsa, kvadrat qavs (03-bobda ko'rgan) qulay.

17.5 Tayyor animatsiyalar β€” bitta klass, tayyor harakat

Ba'zi harakatlar shunchalik ko'p kerakki, Tailwind ularni tayyor beradi. Trigger ham, @keyframes ham kerak emas β€” klassni qo'shasiz, element o'zi harakatlanadi:

Klass Nima qiladi Qachon
animate-spin doimiy aylanadi yuklash spinneri
animate-pulse xiralashib-yorishadi skeleton (yuklanayotgan kontent o'rni)
animate-bounce yuqoriga-pastga sakraydi "pastga aylantir" ishorasi
animate-ping halqa kengayib o'chadi bildirishnoma nuqtasi
animate-none animatsiyani o'chiradi shartli holatda to'xtatish

Tayyor animatsiyalar: spin, pulse, bounce, ping

Spinner

<svg class="animate-spin h-6 w-6 text-indigo-600" viewBox="0 0 24 24" fill="none">
  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/>
</svg>

Aylananing bir qismini xira (opacity-25), boshqasini to'q (opacity-75) qilib, animate-spin butunini aylantiradi β€” natijada "yuklash" doirasi.

Skeleton (skelet) yuklagich

Kontent kelguncha uning o'rnini xira to'rtburchaklar bilan to'ldirish β€” bo'sh ekrandan ko'ra ko'p hurmatli:

<div class="space-y-3">
  <div class="h-4 w-3/4 rounded bg-slate-200 animate-pulse"></div>
  <div class="h-4 w-1/2 rounded bg-slate-200 animate-pulse"></div>
  <div class="h-32 w-full rounded-lg bg-slate-200 animate-pulse"></div>
</div>

Bildirishnoma nuqtasi

animate-ping ni bitta nuqta ustida joylab, "yangi narsa bor" hissi beriladi:

<span class="relative inline-flex h-3 w-3">
  <span class="absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75 animate-ping"></span>
  <span class="relative inline-flex h-3 w-3 rounded-full bg-red-500"></span>
</span>

17.6 Custom animatsiya β€” o'zingizning harakatingiz (v4 CSS-first)

Tayyorlari yetmasa? v4'da custom animatsiyani CSS'da belgilaysiz: @theme ichida --animate-* o'zgaruvchisi + @keyframes. Tailwind avtomatik mos animate-* utility yaratadi.

@import "tailwindcss";

@theme {
  --animate-wiggle: wiggle 0.4s ease-in-out infinite;
}

@keyframes wiggle {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}

Endi HTML'da tayyor:

<!-- Xato bo'lganda input chayqaladi -->
<input class="border rounded px-3 py-2 animate-wiggle" />

Xuddi shunday, custom easing ham qo'shasiz:

@theme {
  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
}

<div class="transition-transform duration-300 ease-fluid hover:scale-105">...</div>

πŸ“ v3 dan farq. v3 da custom animatsiya/easing'ni tailwind.config.js dagi theme.extend.animation va keyframes obyektlarida JavaScript bilan yozardingiz. v4 da JS config yo'q β€” hammasi CSS'dagi @theme + @keyframes. Bu tizim to'liq 18-bobda ochiladi; hozir shuni bilsangiz kifoya: --animate-<nom> o'zgaruvchisi animate-<nom> utility'sini yaratadi.

17.7 Paydo bo'lish va @starting-style β€” ochilayotgan elementlar

Hover'da rangni o'tkazish oson, chunki element allaqachon sahifada. Ammo menyu, dropdown yoki dialog yangi paydo bo'lganda silliq kirishi qiyinroq: brauzerda boshlang'ich holat yo'q edi β€” qaysi "A"dan "B"ga o'tamiz?

Buni zamonaviy CSS @starting-style bilan hal qiladi, va v4 unga starting: variantini beradi: "element birinchi marta render bo'layotganda mana shu boshlang'ich holatdan boshla". Display o'zgarishlari uchun esa transition-discrete kerak (chunki display odatda animatsiya qilinmaydi).

<!-- popover/dialog ochilganda silliq kirishi -->
<div popover class="opacity-100 transition-discrete transition
                    starting:open:opacity-0">
  Men silliq paydo bo'laman
</div>

G'oya: oddiy holatda element opacity-100; starting: varianti esa "birinchi ko'rinish onida opacity-0dan boshla" deydi β€” natijada element yo'qdan emas, xiralikdan silliq chiqadi. transition-discrete display/overlay kabi diskret o'zgarishlarni ham o'tishga qo'shadi.

πŸ’‘ Bu juda yangi platforma imkoniyati va asosan native popover/<dialog> bilan birga porlaydi. Hozircha shu konseptni bilib qo'ying: hover = mavjud element, starting: = paydo bo'layotgan element.

17.8 Accessibility va unumdorlik β€” buni hech qachon unutmang

prefers-reduced-motion β€” foydalanuvchiga hurmat

Ba'zi odamlar harakatdan bosh og'rishi, ko'ngil aynishi yoki vestibulyar buzilish his qiladi. Ular operatsion tizimda "harakatni kamaytir" sozlamasini yoqadi. Sizning vazifangiz β€” buni hurmat qilish. Tailwind ikki variant beradi:

  • motion-reduce: β€” foydalanuvchi harakatni kamaytirishni so'raganda qo'llanadi.
  • motion-safe: β€” faqat harakat ruxsat etilgan bo'lsa qo'llanadi.
<!-- Harakat o'chirilgan bo'lsa, transition yo'q -->
<button class="transition hover:scale-105 motion-reduce:transition-none motion-reduce:hover:scale-100">
  Hurmatli tugma
</button>

<!-- Yoki: animatsiyani faqat ruxsat berilganda yoq -->
<div class="motion-safe:animate-bounce">⬇️</div>

⚠️ Bu ixtiyoriy emas. Hammabop (accessible) interfeys β€” professional ish belgisi. Diqqatni tortuvchi har bir doimiy animatsiya (animate-bounce, animate-pulse, parallax) uchun motion-reduce: bilan tinch muqobilni o'ylang. Eng oddiy qoida: harakatni motion-safe: ostiga qo'yib, asosiy holatni harakatsiz qoldiring.

Unumdorlik β€” arzon va qimmat xossalar

Hamma xossa bir xil arzon emas. Brauzer uchun eng arzoni β€” transform va opacity: ular GPU'da, layoutni qayta hisoblamasdan ishlaydi. width, height, top, margin kabi layout xossalarini animatsiya qilish esa qimmat β€” har kadrda butun sahifa qayta o'lchanadi (jank sababi).

πŸ’‘ Oltin qoida. Harakatni iloji boricha transform va opacity orqali qiling. "Kichraytirmoqchimisiz" β€” width emas, scale. "Surmoqchimisiz" β€” margin/top emas, translate. Kerak bo'lsa transform-gpu bilan GPU'ga majburlash yoki will-change-transform bilan brauzerni ogohlantirish mumkin β€” lekin kam ishlating: will-change ni hamma joyga sochsangiz, foydadan ko'ra zarari ko'p.

17.9 Hammasini birga β€” "wiggle" bilan xato beruvchi forma

O'rgangan bo'laklarni bitta amaliy misolga jamlaymiz: input noto'g'ri to'ldirilganda chayqaladi, tugma bosilganda ezilsa va yuborilayotganda spinner ko'rsatsa β€” barchasi harakatni hurmat qilgan holda:

<form class="space-y-4">
  <!-- data-[invalid] holatda chayqaladi (custom wiggle, 17.6) -->
  <input
    data-invalid
    class="w-full rounded-lg border px-3 py-2
           transition-colors focus:border-indigo-500
           data-[invalid]:border-red-500
           data-[invalid]:motion-safe:animate-wiggle"
    placeholder="Email"
  />

  <!-- bosilganda ezilib, hover'da to'qlashadi -->
  <button class="flex items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2 text-white
                 transition active:scale-95 hover:bg-indigo-700
                 motion-reduce:active:scale-100">
    <svg class="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/>
    </svg>
    Yuborilmoqda...
  </button>
</form>

E'tibor bering:

  • transition-colors β€” input border rangi silliq o'zgaradi (faqat rang, transition-all emas).
  • data-[invalid]:motion-safe:animate-wiggle β€” xato bo'lsa va harakat ruxsat etilgan bo'lsa chayqaladi.
  • active:scale-95 β€” tugma bosilganda jismoniy javob; motion-reduce:active:scale-100 uni harakatsiz holatda bekor qiladi.
  • animate-spin β€” yuklash hissi.

17.10 Tez-tez uchraydigan xatolar

  • transition ni unutish. Faqat hover:scale-105 yozsangiz, o'zgarish birdan bo'ladi. Silliqlik uchun transition (yoki transition-transform) shart.
  • transition-all ni ko'r-ko'rona ishlatish. Jank va keraksiz hisob sababi. Kerakli xossani tanlang.
  • Qimmat xossalarni animatsiya qilish. width/height/top o'rniga scale/translate ishlating β€” ular GPU'da arzon.
  • prefers-reduced-motion ni unutish. Doimiy harakat (animate-bounce/pulse) qo'yib, motion-reduce: muqobilini bermaslik β€” accessibility xatosi.
  • Juda uzun davomiylik. 500ms+ UI o'tishlari "og'ir" his qilinadi. UI uchun 150–300ms saqlang.
  • 3D'da perspective'ni unutish. rotate-y-* "yassi" ko'rinsa, ehtimol ota-elementda perspective-* (va bolada transform-3d) yo'q.

πŸ”­ Oldinga qarash. Bu bobda --animate-wiggle va --ease-fluid kabi custom token'larni ishlatdik, lekin ularning ortidagi to'liq tizimga to'xtalmadik. Custom rang, spacing, shrift, breakpoint β€” barcha dizayn token'larini @theme ichida boshqarish keyingi bobning mavzusi: 18 β€” @theme bilan dizayn tizimi.

Mashqlar

1-mashq. Quyidagi tugmada rang o'zgaradi, lekin birdan, silliqliksiz. Sababini toping va tuzating:

<button class="bg-emerald-500 hover:bg-emerald-700 px-4 py-2 text-white rounded">Saqlash</button>
Yechim

transition (yoki aniqrog'i transition-colors) yo'q β€” shuning uchun brauzer rangni interpolatsiya qilmaydi, balki birdan almashtiradi. Trigger (hover:) va asos bor, lekin "kalit" yetishmaydi:

<button class="bg-emerald-500 hover:bg-emerald-700 px-4 py-2 text-white rounded
               transition-colors duration-200 ease-out">Saqlash</button>

Endi rang 200ms da silliq o'tadi. Qoida: asos + variant + transition β€” uchtasi ham bo'lishi shart.

2-mashq. Hover-lift karta yozing: ustiga kelinganda karta 0.25rem yuqoriga ko'tarilsin va soyasi shadow dan shadow-xl ga o'tsin, hammasi silliq.

Yechim 
<article class="rounded-xl bg-white p-6 shadow
                transition hover:-translate-y-1 hover:shadow-xl">
  ...
</article>

hover:-translate-y-1 β€” manfiy Y = yuqoriga 0.25rem. hover:shadow-xl β€” soyani kuchaytiradi. transition ikkalasini ham o'tkazadi. (Faqat transform o'tsa kifoya bo'lsa, transition-transform aniqroq, lekin bu yerda soya ham o'zgarayotgani uchun umumiy transition mos.)

3-mashq. Tugma bosilganda biroz "ezilsin" (kichraysin), hover'da to'qroq rangga o'tsin β€” silliq holatda. Klasslarni yozing.

Yechim 
<button class="rounded-lg bg-sky-500 px-4 py-2 text-white
               transition active:scale-95 hover:bg-sky-600">
  Bos
</button>

active:scale-95 β€” bosilgan paytda 95% gacha kichrayadi (jismoniy "bosildi" hissi). hover:bg-sky-600 β€” to'qroq fon. transition ham rangni, ham masshtabni silliq qiladi.

4-mashq. animate-bounce bilan "pastga aylantir" strelkasi qo'ymoqchisiz, lekin u harakatni o'chirgan foydalanuvchilarni bezovta qilmasin. To'g'ri klasslarni yozing.

Yechim 
<div class="motion-safe:animate-bounce">⬇️</div>

motion-safe: β€” animatsiya faqat foydalanuvchi harakatga ruxsat bergan bo'lsa qo'llanadi. Harakat kamaytirilgan bo'lsa, strelka qimirlamaydi, lekin baribir ko'rinadi. (Muqobil: animate-bounce motion-reduce:animate-none β€” bu ham to'g'ri, lekin motion-safe: toza, chunki standartni harakatsiz qoldiradi.)

5-mashq (custom). Xato bo'lganda input chayqaladigan wiggle animatsiyasini v4 usulida yarating: 0.4 soniya, ease-in-out, cheksiz, -3deg dan 3deg gacha. So'ng uni inputga ulang.

Yechim

CSS faylda @theme + @keyframes:

@import "tailwindcss";

@theme {
  --animate-wiggle: wiggle 0.4s ease-in-out infinite;
}

@keyframes wiggle {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}

HTML'da yangi animate-wiggle utility tayyor:

<input class="border rounded px-3 py-2 animate-wiggle" />

--animate-wiggle o'zgaruvchisi avtomatik animate-wiggle utility'sini yaratadi. v3 da bu tailwind.config.js dagi keyframes + animation orqali qilinardi.

6-mashq (debugging). Quyidagi 3D flip-karta "yassi" ko'rinmoqda β€” orqa tomon hech qachon chiroyli aylanmaydi, ikkala yuza birga ko'rinadi. Ikki xatoni toping.

<div class="group h-56 w-44">
  <div class="relative h-full w-full transition-transform duration-500 group-hover:rotate-y-180">
    <div class="absolute inset-0 rounded-xl bg-indigo-500">Old</div>
    <div class="absolute inset-0 rotate-y-180 rounded-xl bg-slate-800">Orqa</div>
  </div>
</div>
Yechim

Ikki narsa yetishmaydi:

  1. Perspective + transform-3d yo'q. 3D burilish chuqurliksiz "yassi" ko'rinadi. Ota-elementga perspective ([perspective:1000px] yoki perspective-distant), aylanuvchi o'ramga transform-3d kerak.
  2. backface-hidden yo'q. Usiz har ikki yuza bir vaqtda ko'rinib, effekt buziladi. Har bir yuzaga backface-hidden qo'shish kerak.

Tuzatilgan:

<div class="group h-56 w-44 [perspective:1000px]">
  <div class="relative h-full w-full transition-transform duration-500 transform-3d group-hover:rotate-y-180">
    <div class="absolute inset-0 backface-hidden rounded-xl bg-indigo-500">Old</div>
    <div class="absolute inset-0 backface-hidden rotate-y-180 rounded-xl bg-slate-800">Orqa</div>
  </div>
</div>

⬅️ Oldingi: 16 β€” Dark mode Β· 🏠 README Β· Keyingi: 18 β€” @theme bilan dizayn tizimi ➑️