[{"data":1,"prerenderedAt":256},["ShallowReactive",2],{"lesson:t5-s06-transforms":3,"course:taropood":59},{"meta":4,"prev":11,"next":14,"sections":18},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},true,6,"t5-s06-transforms","book",5,"فصل ۰۶ — transform",{"free_preview":5,"order":9,"slug":12,"source":8,"term":9,"title_fa":13},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":15,"slug":16,"source":8,"term":9,"title_fa":17},7,"t5-s07-transitions","فصل ۰۷ — transition",[19,23,26,31,34,37,40,43,46,49,52,56],{"kind":20,"heading":21,"html":22},"normal","در این فصل چه می‌سازی","\u003Ch2 id=\"در-این-فصل-چه-می‌سازی\">در این فصل چه می‌سازی\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84-%DA%86%D9%87-%D9%85%DB%8C%E2%80%8C%D8%B3%D8%A7%D8%B2%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>آخر این فصل یک ردیف کارت داری که وقتی موس رویشان می‌رود، زنده می‌شوند: کارت کمی بالا می‌پرد، بزرگ‌تر می‌شود و کمی کج می‌ایستد — مثل کارتی که از میز بلند شده تا خودش را نشان بدهد. ابزارِ این کار یک property تازه است به اسم \u003Ccode>transform\u003C\u002Fcode>: با آن یک عنصر را جابه‌جا می‌کنی، بزرگ و کوچک می‌کنی، یا می‌چرخانی، بی‌آنکه HTML را دست بزنی.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-hover-lift.88baa32d5d.160.webp 160w, \u002F_img\u002F01-image-hover-lift.88baa32d5d.320.webp 320w, \u002F_img\u002F01-image-hover-lift.88baa32d5d.640.webp 640w, \u002F_img\u002F01-image-hover-lift.88baa32d5d.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-hover-lift.88baa32d5d.1280.jpg\" srcset=\"\u002F_img\u002F01-image-hover-lift.88baa32d5d.160.jpg 160w, \u002F_img\u002F01-image-hover-lift.88baa32d5d.320.jpg 320w, \u002F_img\u002F01-image-hover-lift.88baa32d5d.640.jpg 640w, \u002F_img\u002F01-image-hover-lift.88baa32d5d.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"یک ردیف سه کارت که کارتِ وسط با موس بزرگ‌تر و کمی کج شده و از دو کارتِ کناری بالاتر آمده، ولی جای اصلی‌اش در ردیف هنوز محفوظ است\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>آخر این فصل می‌توانی:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>با \u003Ccode>transform\u003C\u002Fcode> یک عنصر را جابه‌جا، بزرگ یا بچرخانی\u003C\u002Fli>\n\u003Cli>فرقِ \u003Ccode>translate()\u003C\u002Fcode>، \u003Ccode>scale()\u003C\u002Fcode> و \u003Ccode>rotate()\u003C\u002Fcode> را بگویی و درست را انتخاب کنی\u003C\u002Fli>\n\u003Cli>با \u003Ccode>transform-origin\u003C\u002Fcode> نقطهٔ چرخش یا بزرگ‌شدن را عوض کنی\u003C\u002Fli>\n\u003Cli>توضیح بدهی چرا \u003Ccode>transform\u003C\u002Fcode> فقط ظاهر را عوض می‌کند، نه جای واقعیِ عنصر در چیدمان\u003C\u002Fli>\n\u003C\u002Ful>\n",{"kind":20,"heading":24,"html":25},"قبل از شروع","\u003Ch2 id=\"قبل-از-شروع\">قبل از شروع\u003Ca class=\"head-anchor\" href=\"#%D9%82%D8%A8%D9%84-%D8%A7%D8%B2-%D8%B4%D8%B1%D9%88%D8%B9\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>از ترم ۳:\u003C\u002Fstrong> \u003Ccode>display: flex\u003C\u002Fcode> و \u003Ccode>gap\u003C\u002Fcode> — ردیفِ کارت‌ها را با همین می‌سازیم.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۱ (همین ترم):\u003C\u002Fstrong> \u003Ccode>:hover\u003C\u002Fcode> — همهٔ حرکت‌ها را روی همین حالت سوار می‌کنیم.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از ترم ۲:\u003C\u002Fstrong> \u003Ccode>padding\u003C\u002Fcode>، \u003Ccode>border-radius\u003C\u002Fcode> و رنگ.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>مثل همیشه فقط یک مرورگر لازم داری، یا فقط همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":27,"heading":28,"html":29,"embed":30},"lab","","— سه کارتِ ساده و بی‌حرکت می‌بینی. کارِ این فصل این است که تکه‌تکه به آن‌ها حرکت بدهی و هر بار با موس اثرش را ببینی","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-5-interaction\u002Fsession-06-transforms",{"kind":20,"heading":32,"html":33},"۱. transform و scale(): بزرگ کردن","\u003Ch2 id=\"۱-transform-و-scale-بزرگ-کردن\">۱. \u003Ccode>transform\u003C\u002Fcode> و \u003Ccode>scale()\u003C\u002Fcode>: بزرگ کردن\u003Ca class=\"head-anchor\" href=\"#%DB%B1-transform-%D9%88-scale-%D8%A8%D8%B2%D8%B1%DA%AF-%DA%A9%D8%B1%D8%AF%D9%86\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>بیا اول ردیفِ کارت‌ها را بسازیم. HTML یک \u003Ccode><main>\u003C\u002Fcode> است با سه \u003Ccode><article>\u003C\u002Fcode>، چون هر کارت یک تکهٔ مستقل است:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><main class="row">\n  <article class="card">یک<\u002Farticle>\n  <article class="card">دو<\u002Farticle>\n  <article class="card">سه<\u002Farticle>\n<\u002Fmain>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>و استایلِ پایه: کارت‌ها را با flexbox کنارِ هم می‌چینیم.\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.row {\n  display: flex;\n  gap: 16px;\n}\n\n.card {\n  flex: 1;\n  padding: 32px;\n  background-color: #2a6b93;\n  color: #ffffff;\n  text-align: center;\n  border-radius: 8px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>حالا اولین \u003Ccode>transform\u003C\u002Fcode>. می‌خواهیم کارت با موس بزرگ‌تر شود. برای این از تابعِ \u003Ccode>scale()\u003C\u002Fcode> استفاده می‌کنیم: \u003Ccode>scale(1.1)\u003C\u002Fcode> یعنی «۱٫۱ برابرِ اندازهٔ اصلی». این را روی \u003Ccode>:hover\u003C\u002Fcode> بگذار:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.card:hover {\n  transform: scale(1.1);\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> موس را روی یک کارت ببر — بزرگ می‌شود، و موس را که برداری به اندازهٔ اصلی برمی‌گردد. حالا خوب دقت کن: وقتی کارت بزرگ می‌شود، کمی \u003Cstrong>روی\u003C\u002Fstrong> کارت‌های کناری می‌آید، ولی آن‌ها ذره‌ای جابه‌جا نمی‌شوند و سرِ جایشان می‌مانند. این نکته را به خاطر بسپار؛ در بخش ۵ همین رفتار، هم قلبِ ماجراست و هم یک تلهٔ رایج.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>قبل از ادامه، جواب بده:\u003C\u002Fstrong> \u003Ccode>scale(1)\u003C\u002Fcode> چه می‌کند؟ و \u003Ccode>scale(0.5)\u003C\u002Fcode> چه؟\u003C\u002Fp>\n\u003Chr>\n\u003Cp>\u003Cstrong>جواب:\u003C\u002Fstrong> \u003Ccode>scale(1)\u003C\u002Fcode> یعنی همان اندازهٔ اصلی، هیچ تغییری نمی‌دهد. \u003Ccode>scale(0.5)\u003C\u002Fcode> یعنی نصفِ اندازه — کارت کوچک می‌شود. عددِ بزرگ‌تر از ۱ بزرگ می‌کند، کوچک‌تر از ۱ کوچک.\u003C\u002Fp>\n",{"kind":20,"heading":35,"html":36},"۲. translate(): جابه‌جا کردن","\u003Ch2 id=\"۲-translate-جابه‌جا-کردن\">۲. \u003Ccode>translate()\u003C\u002Fcode>: جابه‌جا کردن\u003Ca class=\"head-anchor\" href=\"#%DB%B2-translate-%D8%AC%D8%A7%D8%A8%D9%87%E2%80%8C%D8%AC%D8%A7-%DA%A9%D8%B1%D8%AF%D9%86\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>تابعِ بعدی \u003Ccode>translate()\u003C\u002Fcode> است: عنصر را از جای خودش جابه‌جا می‌کند. دو مقدار می‌گیرد — جابه‌جاییِ افقی و عمودی — ولی یک نسخهٔ ساده‌ترش هم داریم: \u003Ccode>translateY()\u003C\u002Fcode> فقط عمودی، و \u003Ccode>translateX()\u003C\u002Fcode> فقط افقی. برای اینکه کارت با موس کمی «بالا بپرد»، از \u003Ccode>translateY()\u003C\u002Fcode> با یک عددِ منفی استفاده می‌کنیم (منفی یعنی به بالا):\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.card:hover {\n  transform: translateY(-8px);\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> حالا موس که روی کارت برود، کارت ۸ پیکسل بالا می‌پرد. عدد را به \u003Ccode>-20px\u003C\u002Fcode> عوض کن تا بالاتر بپرد، بعد به \u003Ccode>10px\u003C\u002Fcode> تا به‌جایش پایین برود. با چشمت جهتِ منفی و مثبت را ببین.\u003C\u002Fp>\n",{"kind":20,"heading":38,"html":39},"۳. rotate(): چرخاندن","\u003Ch2 id=\"۳-rotate-چرخاندن\">۳. \u003Ccode>rotate()\u003C\u002Fcode>: چرخاندن\u003Ca class=\"head-anchor\" href=\"#%DB%B3-rotate-%DA%86%D8%B1%D8%AE%D8%A7%D9%86%D8%AF%D9%86\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>تابعِ سوم \u003Ccode>rotate()\u003C\u002Fcode> است: عنصر را می‌چرخاند. مقدارش با واحدِ \u003Ccode>deg\u003C\u002Fcode> (درجه) نوشته می‌شود — \u003Ccode>360deg\u003C\u002Fcode> یک دورِ کامل است. برای یک کجیِ ملایم، مقدارِ کوچک بده:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.card:hover {\n  transform: rotate(-5deg);\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> کارت با موس کمی کج می‌شود. عددِ منفی خلافِ عقربهٔ ساعت می‌چرخاند، مثبت با عقربهٔ ساعت. \u003Ccode>rotate(5deg)\u003C\u002Fcode> را امتحان کن و فرقِ جهت را ببین. حواست باشد کارت دورِ \u003Cstrong>مرکزِ خودش\u003C\u002Fstrong> می‌چرخد — این را در بخش بعد عوض می‌کنیم.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>قبل از ادامه، جواب بده:\u003C\u002Fstrong> \u003Ccode>rotate(360deg)\u003C\u002Fcode> روی یک کارت چه اثری دارد که با چشم دیده شود؟\u003C\u002Fp>\n\u003Chr>\n\u003Cp>\u003Cstrong>جواب:\u003C\u002Fstrong> هیچ. \u003Ccode>360deg\u003C\u002Fcode> یک دورِ کامل است و کارت دقیقاً به جای اول برمی‌گردد، پس ظاهرش عوض‌شده به‌نظر نمی‌رسد. (اگر همین کارت transition داشت، خودِ مسیرِ چرخیدن را می‌دیدی — ولی آن فصلِ بعد است.)\u003C\u002Fp>\n",{"kind":20,"heading":41,"html":42},"۴. transform-origin: نقطهٔ چرخش را عوض کن","\u003Ch2 id=\"۴-transform-origin-نقطهٔ-چرخش-را-عوض-کن\">۴. \u003Ccode>transform-origin\u003C\u002Fcode>: نقطهٔ چرخش را عوض کن\u003Ca class=\"head-anchor\" href=\"#%DB%B4-transform-origin-%D9%86%D9%82%D8%B7%D9%87%D9%94-%DA%86%D8%B1%D8%AE%D8%B4-%D8%B1%D8%A7-%D8%B9%D9%88%D8%B6-%DA%A9%D9%86\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>هر \u003Ccode>transform\u003C\u002Fcode> یک \u003Cstrong>نقطهٔ لنگر\u003C\u002Fstrong> دارد که کار حولِ آن انجام می‌شود، و پیش‌فرضش مرکزِ عنصر است. برای همین \u003Ccode>rotate()\u003C\u002Fcode> دورِ وسط می‌چرخید و \u003Ccode>scale()\u003C\u002Fcode> از وسط بزرگ می‌شد. با \u003Ccode>transform-origin\u003C\u002Fcode> این نقطه را عوض می‌کنی. مثلاً بگو چرخش از پایینِ کارت باشد، انگار کارت روی لبهٔ پایینی‌اش ایستاده و کج می‌شود:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.card:hover {\n  transform: rotate(-5deg);\n  transform-origin: bottom center;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> حالا کارت به‌جای چرخیدن دورِ وسط، از لبهٔ پایینش کج می‌شود. مقدارها را عوض کن: \u003Ccode>top center\u003C\u002Fcode>، بعد \u003Ccode>bottom right\u003C\u002Fcode>. هر بار ببین لنگر کجا می‌رود و چرخش چطور فرق می‌کند.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> می‌توانی چند تابع را در یک \u003Ccode>transform\u003C\u002Fcode> پشتِ هم بگذاری، با فاصله: \u003Ccode>transform: translateY(-8px) scale(1.05) rotate(-2deg);\u003C\u002Fcode>. مرورگر همه را با هم اعمال می‌کند. همین را در کدِ کاملِ آخر به‌کار می‌بریم.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":20,"heading":44,"html":45},"۵. یک تلهٔ مهم: transform فقط ظاهر است","\u003Ch2 id=\"۵-یک-تلهٔ-مهم-transform-فقط-ظاهر-است\">۵. یک تلهٔ مهم: \u003Ccode>transform\u003C\u002Fcode> فقط ظاهر است\u003Ca class=\"head-anchor\" href=\"#%DB%B5-%DB%8C%DA%A9-%D8%AA%D9%84%D9%87%D9%94-%D9%85%D9%87%D9%85-transform-%D9%81%D9%82%D8%B7-%D8%B8%D8%A7%D9%87%D8%B1-%D8%A7%D8%B3%D8%AA\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>حالا مهم‌ترین نکتهٔ این فصل. فرض کن نمی‌خواهی با موس، بلکه می‌خواهی کارتِ وسط را \u003Cstrong>همیشه\u003C\u002Fstrong> کمی بالاتر از بقیه نشان بدهی تا برجسته باشد. وسوسه می‌شوی که مستقیم به یک کارت \u003Ccode>translate\u003C\u002Fcode> بدهی. بیا موقتاً این را امتحان کنیم — به کارتِ وسط یک class بده و بنویس:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.card:nth-child(2) {\n  transform: translateY(-40px);\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>کارتِ وسط ۴۰ پیکسل بالا می‌رود — ولی یک چیزِ عجیب هم می‌بینی: \u003Cstrong>جای خالیِ\u003C\u002Fstrong> کارت در ردیف هنوز آنجاست، و کارت‌های کناری ذره‌ای برای پر کردنش تکان نمی‌خورند. انگار کارت از جایش بلند شده ولی سایه‌اش سرِ جا مانده.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> انتظار داشتی بقیهٔ کارت‌ها جابه‌جا شوند و آن جای خالی پر شود، ولی نشد؟ این خرابی نیست — این دقیقاً کارِ \u003Ccode>transform\u003C\u002Fcode> است. \u003Ccode>transform\u003C\u002Fcode> فقط \u003Cstrong>ظاهرِ\u003C\u002Fstrong> عنصر را در لحظهٔ نقاشی جابه‌جا می‌کند؛ جای واقعیِ عنصر در چیدمان سرِ جای اولش می‌ماند و همان‌قدر فضا اشغال می‌کند. برای همین همسایه‌ها خبردار نمی‌شوند. اگر واقعاً می‌خواهی چیدمان عوض شود و همسایه‌ها جابه‌جا شوند، ابزارش \u003Ccode>margin\u003C\u002Fcode> است نه \u003Ccode>transform\u003C\u002Fcode>. آن قاعدهٔ \u003Ccode>:nth-child(2)\u003C\u002Fcode> را پاک کن.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>و این ضعف نیست؛ دقیقاً همان چیزی است که \u003Ccode>transform\u003C\u002Fcode> را برای حرکت‌های \u003Ccode>:hover\u003C\u002Fcode> عالی می‌کند. چون کارت هنگام بزرگ‌شدن یا پریدن جای واقعی‌اش را عوض نمی‌کند، بقیهٔ صفحه سرِ جا می‌ماند و هیچ‌چیز نمی‌پرد و جابه‌جا نمی‌شود. تصور کن اگر هر بار موس روی یک کارت می‌رفت، کلِ صفحه تکان می‌خورد — افتضاح بود. \u003Ccode>transform\u003C\u002Fcode> همین را حل می‌کند.\u003C\u002Fp>\n",{"kind":20,"heading":47,"html":48},"کد کامل","\u003Ch2 id=\"کد-کامل\">کد کامل\u003Ca class=\"head-anchor\" href=\"#%DA%A9%D8%AF-%DA%A9%D8%A7%D9%85%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>این هم دو فایلِ کامل. اول \u003Ccode>index.html\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><!-- index.html -->\n<!DOCTYPE html>\n<html lang="fa" dir="rtl">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1">\n    <title>transform<\u002Ftitle>\n    <link rel="stylesheet" href="styles.css">\n  <\u002Fhead>\n  <body>\n    <main class="row">\n      <article class="card">یک<\u002Farticle>\n      <article class="card">دو<\u002Farticle>\n      <article class="card">سه<\u002Farticle>\n    <\u002Fmain>\n  <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>و \u003Ccode>styles.css\u003C\u002Fcode> — حالا هر سه تابع را در یک \u003Ccode>transform\u003C\u002Fcode> با هم می‌گذاریم: کارت هم‌زمان بالا می‌پرد، بزرگ می‌شود و کمی کج می‌ایستد، با لنگرِ پایین:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>\u002F* styles.css *\u002F\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  background-color: #f6edda;\n  padding: 32px;\n}\n\n.row {\n  display: flex;\n  gap: 16px;\n}\n\n.card {\n  flex: 1;\n  padding: 32px;\n  background-color: #2a6b93;\n  color: #ffffff;\n  text-align: center;\n  border-radius: 8px;\n}\n\n.card:hover {\n  transform: translateY(-8px) scale(1.05) rotate(-2deg);\n  transform-origin: bottom center;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-visual-only-gap.b17777a7d1.160.webp 160w, \u002F_img\u002F02-image-visual-only-gap.b17777a7d1.320.webp 320w, \u002F_img\u002F02-image-visual-only-gap.b17777a7d1.640.webp 640w, \u002F_img\u002F02-image-visual-only-gap.b17777a7d1.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-visual-only-gap.b17777a7d1.1280.jpg\" srcset=\"\u002F_img\u002F02-image-visual-only-gap.b17777a7d1.160.jpg 160w, \u002F_img\u002F02-image-visual-only-gap.b17777a7d1.320.jpg 320w, \u002F_img\u002F02-image-visual-only-gap.b17777a7d1.640.jpg 640w, \u002F_img\u002F02-image-visual-only-gap.b17777a7d1.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"یک کارت که با موس بالا آمده و کمی کج شده، در حالی که جای اصلی‌اش در ردیف با یک قابِ کم‌رنگ نشان داده شده تا معلوم شود فضایش هنوز محفوظ است\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> موس را روی هر کارت ببر — با هم بالا می‌پرد، بزرگ می‌شود و از لبهٔ پایین کج می‌ایستد. و همان‌طور که فهمیدی، هیچ‌کدام از کارت‌های دیگر برای این حرکت جابه‌جا نمی‌شوند.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> از دستیار AI ات بپرس «چطور یک کارت را با CSS کمی بزرگ‌تر و کج کنم وقتی موس رویش می‌رود؟». جوابش را خط‌به‌خط بخوان و در آزمایشگاه امتحانش کن — بعد از خودش بپرس «آیا این حرکت جای کارت را در چیدمان عوض می‌کند یا فقط ظاهرش را؟». چیزی که با چشمت در آزمایشگاه می‌بینی، جوابِ واقعی است، نه چیزی که AI با اطمینان می‌گوید.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":20,"heading":50,"html":51},"واژه‌های تازهٔ این فصل","\u003Ch2 id=\"واژه‌های-تازهٔ-این-فصل\">واژه‌های تازهٔ این فصل\u003Ca class=\"head-anchor\" href=\"#%D9%88%D8%A7%DA%98%D9%87%E2%80%8C%D9%87%D8%A7%DB%8C-%D8%AA%D8%A7%D8%B2%D9%87%D9%94-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>کلمه\u003C\u002Fth>\n\u003Cth>تلفظ به حروف فارسی\u003C\u002Fth>\n\u003Cth>یعنی چه\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>\u003Ccode>transform\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>ترنسفورم\u003C\u002Ftd>\n\u003Ctd>property ای که ظاهرِ یک عنصر را جابه‌جا، بزرگ یا می‌چرخاند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>translate()\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>ترنسلِیت\u003C\u002Ftd>\n\u003Ctd>عنصر را جابه‌جا می‌کند (\u003Ccode>translateX\u003C\u002Fcode>\u002F\u003Ccode>translateY\u003C\u002Fcode> فقط یک محور)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>scale()\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>اسکِیل\u003C\u002Ftd>\n\u003Ctd>عنصر را بزرگ یا کوچک می‌کند؛ عدد بزرگ‌تر از ۱ بزرگ، کوچک‌تر کوچک\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>rotate()\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>روتِیت\u003C\u002Ftd>\n\u003Ctd>عنصر را می‌چرخاند؛ مقدار با واحدِ \u003Ccode>deg\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>transform-origin\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>ترنسفورم-اوریجین\u003C\u002Ftd>\n\u003Ctd>نقطهٔ لنگرِ چرخش و بزرگ‌شدن؛ پیش‌فرض مرکز است\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n",{"kind":53,"heading":54,"html":55},"checkpoint","تمرین‌ها","\u003Ch2 id=\"تمرین‌ها\">تمرین‌ها\u003Ca class=\"head-anchor\" href=\"#%D8%AA%D9%85%D8%B1%DB%8C%D9%86%E2%80%8C%D9%87%D8%A7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>قبل از تمرین، بدون نگاه‌کردن به بالا جواب بده: چرا وقتی یک کارت با \u003Ccode>:hover\u003C\u002Fcode> بزرگ می‌شود، کارت‌های کناری‌اش تکان نمی‌خورند؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> یک دکمه بساز که با موس هم‌زمان \u003Ccode>scale(1.1)\u003C\u002Fcode> شود و \u003Ccode>rotate(3deg)\u003C\u002Fcode> بخورد. هر دو تابع را در یک \u003Ccode>transform\u003C\u002Fcode> بگذار و ببین با هم اعمال می‌شوند.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> یک عکس یا کارت را با \u003Ccode>transform: rotate(15deg)\u003C\u002Fcode> کج کن، بعد \u003Ccode>transform-origin\u003C\u002Fcode> را از \u003Ccode>center\u003C\u002Fcode> به \u003Ccode>top right\u003C\u002Fcode> عوض کن و در یک جمله بنویس چرا محلِ چرخش این‌قدر فرق کرد.\u003C\u002Fp>\n",{"kind":20,"heading":57,"html":58},"در فصل بعد","\u003Ch2 id=\"در-فصل-بعد\">در فصل بعد\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D9%81%D8%B5%D9%84-%D8%A8%D8%B9%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>الان کارت‌هایت با موس حرکت می‌کنند — ولی این حرکت‌ها ناگهانی‌اند؛ کارت یک‌دفعه می‌پرد و یک‌دفعه برمی‌گردد. فصل بعد سراغِ \u003Ccode>transition\u003C\u002Fcode> می‌رویم: یاد می‌گیری این جهش‌ها را نرم و آرام کنی، طوری که کارت در طولِ چند دهمِ ثانیه بزرگ شود، نه در یک چشم‌به‌هم‌زدن. همین \u003Ccode>transform\u003C\u002Fcode> را برمی‌داریم و روان‌ترش می‌کنیم.\u003C\u002Fp>\n",{"course":60,"entitled":68,"lessons":69,"payments_enabled":68,"terms":255,"live":5},{"active_window":61,"effective_price_toman":62,"free":5,"lesson_count":63,"price_toman":64,"slug":65,"summary_fa":66,"title_fa":67},null,0,61,1500000,"taropood","از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.","تاروپود — خودآموز HTML و CSS",false,[70,74,78,82,86,89,92,95,99,103,107,110,113,116,119,122,125,128,131,134,137,141,144,147,150,153,156,159,162,165,168,171,174,177,180,183,186,189,192,195,198,201,204,207,210,211,212,213,216,219,222,225,228,231,234,237,240,243,246,249,252],{"free_preview":5,"order":71,"slug":72,"source":8,"term":71,"title_fa":73},1,"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":75,"slug":76,"source":8,"term":71,"title_fa":77},2,"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":79,"slug":80,"source":8,"term":71,"title_fa":81},3,"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":83,"slug":84,"source":8,"term":71,"title_fa":85},4,"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":9,"slug":87,"source":8,"term":71,"title_fa":88},"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":6,"slug":90,"source":8,"term":71,"title_fa":91},"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":15,"slug":93,"source":8,"term":71,"title_fa":94},"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":96,"slug":97,"source":8,"term":71,"title_fa":98},8,"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":100,"slug":101,"source":8,"term":71,"title_fa":102},9,"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":104,"slug":105,"source":8,"term":71,"title_fa":106},10,"t1-s10-first-project","فصل ۱۰ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":71,"slug":108,"source":8,"term":75,"title_fa":109},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":75,"slug":111,"source":8,"term":75,"title_fa":112},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":79,"slug":114,"source":8,"term":75,"title_fa":115},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":83,"slug":117,"source":8,"term":75,"title_fa":118},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":9,"slug":120,"source":8,"term":75,"title_fa":121},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":6,"slug":123,"source":8,"term":75,"title_fa":124},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":15,"slug":126,"source":8,"term":75,"title_fa":127},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":96,"slug":129,"source":8,"term":75,"title_fa":130},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":100,"slug":132,"source":8,"term":75,"title_fa":133},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":104,"slug":135,"source":8,"term":75,"title_fa":136},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":138,"slug":139,"source":8,"term":75,"title_fa":140},11,"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":71,"slug":142,"source":8,"term":79,"title_fa":143},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":75,"slug":145,"source":8,"term":79,"title_fa":146},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":79,"slug":148,"source":8,"term":79,"title_fa":149},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":83,"slug":151,"source":8,"term":79,"title_fa":152},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":9,"slug":154,"source":8,"term":79,"title_fa":155},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":6,"slug":157,"source":8,"term":79,"title_fa":158},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":15,"slug":160,"source":8,"term":79,"title_fa":161},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":96,"slug":163,"source":8,"term":79,"title_fa":164},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":100,"slug":166,"source":8,"term":79,"title_fa":167},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":104,"slug":169,"source":8,"term":79,"title_fa":170},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":138,"slug":172,"source":8,"term":79,"title_fa":173},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":71,"slug":175,"source":8,"term":83,"title_fa":176},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":75,"slug":178,"source":8,"term":83,"title_fa":179},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":79,"slug":181,"source":8,"term":83,"title_fa":182},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":83,"slug":184,"source":8,"term":83,"title_fa":185},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":9,"slug":187,"source":8,"term":83,"title_fa":188},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":6,"slug":190,"source":8,"term":83,"title_fa":191},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":15,"slug":193,"source":8,"term":83,"title_fa":194},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":96,"slug":196,"source":8,"term":83,"title_fa":197},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":71,"slug":199,"source":8,"term":9,"title_fa":200},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":75,"slug":202,"source":8,"term":9,"title_fa":203},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":79,"slug":205,"source":8,"term":9,"title_fa":206},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":83,"slug":208,"source":8,"term":9,"title_fa":209},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":9,"slug":12,"source":8,"term":9,"title_fa":13},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},{"free_preview":5,"order":15,"slug":16,"source":8,"term":9,"title_fa":17},{"free_preview":5,"order":96,"slug":214,"source":8,"term":9,"title_fa":215},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":100,"slug":217,"source":8,"term":9,"title_fa":218},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":104,"slug":220,"source":8,"term":9,"title_fa":221},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":71,"slug":223,"source":8,"term":6,"title_fa":224},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":75,"slug":226,"source":8,"term":6,"title_fa":227},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":79,"slug":229,"source":8,"term":6,"title_fa":230},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":83,"slug":232,"source":8,"term":6,"title_fa":233},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":9,"slug":235,"source":8,"term":6,"title_fa":236},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":6,"slug":238,"source":8,"term":6,"title_fa":239},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":15,"slug":241,"source":8,"term":6,"title_fa":242},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":96,"slug":244,"source":8,"term":6,"title_fa":245},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":100,"slug":247,"source":8,"term":6,"title_fa":248},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":104,"slug":250,"source":8,"term":6,"title_fa":251},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":138,"slug":253,"source":8,"term":6,"title_fa":254},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827105314]