لغزنده های سه بعدی بی نهایت CSS

در این سریال، ما اسلایدرهای تصویر را با چیزی جز HTML و CSS ساخته ایم. ایده این است که ما می‌توانیم از یک نشانه‌گذاری یکسان اما CSS متفاوت برای دریافت نتایج بسیار متفاوت استفاده کنیم، مهم نیست که چقدر عکس می‌اندازیم. ما با یک نوار لغزنده دایره‌ای شروع کردیم که بی‌نهایت می‌چرخد، به نوعی مانند فیجت اسپینر که تصاویر را نگه می‌دارد. سپس یکی را ساختیم که پشته‌ای از عکس‌ها را ورق می‌زند.

این بار، ما به بعد سوم فرو می رویم. در ابتدا سخت به نظر می رسد، اما بسیاری از کدهایی که ما به آنها نگاه می کنیم دقیقاً همان چیزی است که در دو مقاله اول این مجموعه با برخی تغییرات استفاده کردیم. بنابراین، اگر اکنون وارد این سری شده‌اید، پیشنهاد می‌کنم برای یافتن زمینه مفاهیمی که در اینجا استفاده می‌کنیم، بقیه را بررسی کنید.

هدف ما این است:

در نگاه اول به نظر می رسد که ما یک مکعب در حال چرخش با چهار تصویر داریم. اما در واقعیت، در مجموع با شش تصویر روبرو هستیم. این نوار لغزنده از زاویه ای دیگر است:

اکنون که تصویری خوبی برای نحوه چیدمان تصاویر داریم، بیایید کد را تجزیه کنیم تا ببینیم چگونه به آنجا می رسیم.

تنظیم اولیه

همان HTML بقیه اسلایدرهایی که برای اسلایدرهای دیگر استفاده کرده ایم:

و یک بار دیگر، ما از CSS Grid برای قرار دادن تصاویر در یک پشته، یکی روی دیگری استفاده می کنیم:

.gallery {
  display: grid;
}
.gallery > img {
  grid-area: 1 / 1;
  width: 160px;
  aspect-ratio: 1;
  object-fit: cover;
}

انیمیشن

منطق این نوار لغزنده بسیار شبیه است نوار لغزنده دایره ای از مقاله اول. در واقع، اگر دوباره ویدیوی بالا را بررسی کنید، می بینید که تصاویر به گونه ای قرار گرفته اند که یک چند ضلعی ایجاد می کند. پس از چرخش کامل به تصویر اول برمی گردد.

ما به CSS متکی بودیم transform-origin و animation-delay ویژگی های آن اسلایدر اول. انیمیشن یکسان برای همه عناصر تصویر اعمال می شود که حول یک نقطه می چرخند. سپس با استفاده از تاخیرهای مختلف، تمام تصاویر را به درستی دور یک دایره بزرگ قرار می دهیم.

پیاده سازی برای نوار لغزنده سه بعدی ما کمی متفاوت خواهد بود. استفاده كردن transform-origin اینجا کار نخواهد کرد زیرا ما به صورت سه بعدی کار می کنیم، بنابراین استفاده خواهیم کرد transform در عوض همه تصاویر را به درستی قرار دهید، سپس ظرف را بچرخانید.

ما دوباره به Sass می‌رسیم تا بتوانیم تعداد تصاویر را حلقه بزنیم و تبدیل‌های خود را اعمال کنیم:

@for $i from 1 to ($n + 1) {
  .gallery > img:nth-child(#{$i}) {
     transform: 
       rotate(#{360*($i - 1) / $n}deg) /* 1 */
       translateY(50% / math.tan(180deg / $n)) /* 2 */ 
       rotateX(90deg); /* 3 */
  }
}

ممکن است تعجب کنید که چرا ما مستقیماً به Sass می پریم. قبل از تعمیم کد با Sass برای محاسبه هر عدد، با تعداد ثابتی از تصاویر با استفاده از وانیل CSS در مقالات دیگر شروع کردیم (N) از تصاویر. خب، من فکر می‌کنم شما اکنون ایده را دریافت کرده‌اید و ما می‌توانیم تمام آن کارهای کشف را قطع کنیم تا به اجرای واقعی برسیم.

La transform ویژگی دارای سه مقدار است که من در اینجا توضیح داده ام:

ابتدا تمام تصاویر را بالای هم می چرخانیم. زاویه چرخش به تعداد تصاویر بستگی دارد. برای N تصاویر، افزایشی برابر داریم 360deg/N. سپس ما translate همه تصاویر به یک اندازه به گونه ای که نقاط مرکزی آنها در طرفین به هم می رسند.

هندسه خسته کننده ای وجود دارد که به توضیح نحوه عملکرد همه اینها کمک می کند، اما فاصله برابر است با 50%/tan(180deg/N). هنگام ساختن لغزنده دایره ای با معادله مشابهی برخورد کردیم ( transform-origin: 50% 50%/sin(180deg/N) ).

در نهایت تصاویر را حول محور x می چرخانیم 90deg تا به ترتیبی که می خواهیم برسیم. در اینجا یک ویدیو است که نشان می دهد آخرین چرخش چه می کند:

اکنون تنها کاری که باید انجام دهیم این است که کل ظرف را بچرخانیم تا لغزنده بی نهایت خود را ایجاد کنیم.

.gallery {
  transform-style: preserve-3d;
  --_t: perspective(280px) rotateX(-90deg);
  animation: r 12s cubic-bezier(.5, -0.2, .5, 1.2) infinite;
}
@keyframes r {
  0%, 3% {transform: var(--_t) rotate(0deg); }
  @for $i from 1 to $n {
    #{($i/$n)*100 - 2}%, 
    #{($i/$n)*100 + 3}% {
      transform: var(--_t) rotate(#{($i / $n) * -360}deg);
    }  
  }
  98%, 100% { transform: var(--_t) rotate(-360deg); }
}

درک این کد ممکن است سخت باشد، بنابراین بیایید در واقع یک لحظه به عقب برگردیم و انیمیشنی را که برای نوار لغزنده دایره ای ساخته ایم دوباره بررسی کنیم. این چیزی است که در اولین مقاله نوشتیم:

.gallery {
  animation: m 12s cubic-bezier(.5, -0.2, .5, 1.2) infinite;
}
@keyframes m {
  0%, 3% { transform: rotate(0); }
  @for $i from 1 to $n {
    #{($i / $n) * 100 - 2}%,
    #{($i / $n) * 100 + 3}% { 
      transform: rotate(#{($i / $n) * -360}deg);
    }  
  }
  98%, 100% { transform: rotate(-360deg); }
}

فریم های کلیدی تقریباً یکسان هستند. مقادیر درصد یکسان، حلقه یکسان و چرخش یکسان داریم.

چرا هر دو یکی هستند؟ چون منطق آنها یکی است. در هر دو مورد، تصاویر در اطراف یک شکل دایره ای قرار گرفته اند و برای نشان دادن هر تصویر باید کل آن را بچرخانیم. به این ترتیب من توانستم فریم های کلیدی را از نوار لغزنده دایره ای کپی کنم و از همان کد برای نوار لغزنده سه بعدی خود استفاده کنم. تنها تفاوت این است که ما باید ظرف را بچرخانیم -90deg در امتداد محور x برای دیدن تصاویر از آنجایی که قبلاً آنها را چرخانده ایم 90deg در همین محور سپس مقداری از آن را اضافه می کنیم perspective برای دریافت افکت سه بعدی

خودشه! نوار لغزنده ما تمام شده است. در اینجا نسخه ی نمایشی کامل دوباره است. تنها کاری که باید انجام دهید این است که هر تعداد تصویر را که می خواهید اضافه کنید و یک متغیر را به روز رسانی کنید تا آن را اجرا کنید.

نوار لغزنده سه بعدی عمودی

از آنجایی که ما در فضای سه بعدی بازی می کنیم، چرا یک نسخه عمودی از نوار لغزنده قبلی ایجاد نمی کنیم؟ آخرین مورد در امتداد محور z می چرخد، اما اگر بخواهیم می توانیم در امتداد محور x حرکت کنیم.

اگر کدهای هر دو نسخه این نوار لغزنده را مقایسه کنید، ممکن است فوراً تفاوت را متوجه نشوید زیرا فقط یک کاراکتر است! جایگزین کردم rotate() با rotateX() داخل فریم های کلیدی و تصویر transform. خودشه!

لازم به ذکر است که rotate() برابر است با rotateZ()، بنابراین با تغییر محور از Z به X ما نوار لغزنده را از نسخه افقی به عمودی تبدیل می کنیم.

نوار لغزنده مکعب

ما نمی توانیم در مورد 3D در CSS بدون صحبت کنیم صحبت در مورد مکعب ها. و بله، این بدان معناست که ما قصد داریم نسخه دیگری از نوار لغزنده را بسازیم.

ایده پشت این نسخه از نوار لغزنده ایجاد یک مکعب واقعی با تصاویر و چرخاندن تمام چیز در حول محورهای مختلف است. از آنجایی که مکعب است، با شش وجه سروکار داریم. از شش تصویر استفاده خواهیم کرد، یکی برای هر وجه مکعب. بنابراین، بدون Sass اما به وانیلی CSS برمی گردیم.

آن انیمیشن کمی طاقت فرسا است، درست است؟ اصلا از کجا شروع می کنی؟

ما شش چهره داریم، بنابراین باید حداقل شش چرخش انجام دهیم تا هر تصویر یک نوبت داشته باشد. خوب، در واقع، ما به پنج چرخش نیاز داریم - آخرین مورد ما را به اولین چهره تصویر برمی گرداند. اگر یک مکعب روبیک - یا یک شی مکعبی شکل دیگر مانند تاس - بگیرید و آن را با دست خود بچرخانید، ایده خوبی از کاری که ما انجام می دهیم خواهید داشت.

.gallery {
  --s: 250px; /* the size */

  transform-style: preserve-3d;
  --_p: perspective(calc(2.5*var(--s)));
  animation: r 9s infinite cubic-bezier(.5, -0.5, .5, 1.5);
}

@keyframes r {
  0%, 3%   { transform: var(--_p); }
  14%, 19% { transform: var(--_p) rotateX(90deg); }
  31%, 36% { transform: var(--_p) rotateX(90deg) rotateZ(90deg); }
  47%, 52% { transform: var(--_p) rotateX(90deg) rotateZ(90deg) rotateY(-90deg); }
  64%, 69% { transform: var(--_p) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg); }
  81%, 86% { transform: var(--_p) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg) rotateZ(90deg); }
  97%, 100%{ transform: var(--_p) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg); }
}

La transform ویژگی با چرخش صفر شروع می شود و در هر حالت یک چرخش جدید روی یک محور خاص اضافه می کنیم تا به شش چرخش برسیم. سپس به تصویر اول برمی گردیم.

جایگذاری تصاویرمان را فراموش نکنیم. هر کدام با استفاده از یک وجه مکعب اعمال می شود transform:

.gallery img {
  grid-area: 1 / 1;
  width: var(--s);
  aspect-ratio: 1;
  object-fit: cover;
  transform: var(--_t,) translateZ(calc(var(--s) / 2));
}
.gallery img:nth-child(2) { --_t: rotateX(-90deg); }
.gallery img:nth-child(3) { --_t: rotateY( 90deg) rotate(-90deg); }
.gallery img:nth-child(4) { --_t: rotateX(180deg) rotate( 90deg); }
.gallery img:nth-child(5) { --_t: rotateX( 90deg) rotate( 90deg); }
.gallery img:nth-child(6) { --_t: rotateY(-90deg); }

احتمالاً فکر می کنید که منطق پیچیده عجیبی پشت مقادیری که من در آنجا استفاده می کنم وجود دارد، درست است؟ خب نه. تنها کاری که من انجام دادم این بود که DevTools را باز کردم و با مقادیر چرخش مختلف برای هر تصویر بازی کردم تا زمانی که آن را درست انجام دادم. ممکن است احمقانه به نظر برسد، اما، هی، کار می کند - به خصوص که ما تعداد ثابتی از تصاویر داریم و به دنبال چیزی نیستیم که پشتیبانی کند N تصاویر.

در واقع، ارزش‌هایی را که استفاده می‌کنم فراموش کنید و سعی کنید قرار دادن را به تنهایی به عنوان تمرین انجام دهید. با همه تصاویری که روی هم چیده شده اند شروع کنید، DevTools را باز کنید و بروید! احتمالاً با کدهای متفاوتی مواجه خواهید شد و این کاملاً خوب است. روش های مختلفی برای قرار دادن تصاویر می تواند وجود داشته باشد.

کاما داخلش چه حقه ای داره var()? آیا اشتباه تایپی است؟

اشتباه تایپی نیست پس حذفش نکنید! اگر آن را حذف کنید، متوجه خواهید شد که روی قرارگیری تصویر اول تأثیر می گذارد. می توانید این را در کدی که تعریف کرده ام ببینید --_t برای همه تصاویر به جز تصویر اول، زیرا من فقط برای آن نیاز به ترجمه دارم. این کاما باعث می شود که متغیر به مقدار صفر برگردد. بدون کاما، بازگشتی نخواهیم داشت و کل مقدار نامعتبر خواهد بود.

از جانب مشخصات:

نکته: یعنی var(--a,) یک تابع معتبر است، مشخص می کند که اگر --a ویژگی سفارشی نامعتبر یا مفقود است، var()` باید با هیچ چیز جایگزین شود.

نوار لغزنده مکعب تصادفی

کمی تصادفی بودن می تواند پیشرفت خوبی برای این نوع انیمیشن باشد. بنابراین، به جای چرخاندن مکعب به ترتیب متوالی، می‌توانیم تاس را به اصطلاح بیاندازیم و اجازه دهیم مکعب هر طور که بخواهد بچرخد.

باحال درسته؟ من شما را نمی دانم، اما من این نسخه را بیشتر دوست دارم! جالب تر است و انتقال ها برای تماشا راضی کننده است. و حدس بزنید چه؟ شما می توانید با مقادیر بازی کنید تا نوار لغزنده مکعب تصادفی خود را ایجاد کنید!

منطق واقعی است نه تصادفی - فقط به نظر می رسد. شما الف را تعریف می کنید transform در هر فریم کلیدی که به شما امکان می دهد یک چهره را نشان دهید و ... خوب، واقعاً همین است! شما می توانید هر سفارشی را که می خواهید انتخاب کنید.

@keyframes r {
  0%, 3%   { transform: var(--_p) rotate3d( 0, 0, 0,  0deg); }
  14%,19%  { transform: var(--_p) rotate3d(-1, 1, 0,180deg); }
  31%,36%  { transform: var(--_p) rotate3d( 0,-1, 0, 90deg); }
  47%,52%  { transform: var(--_p) rotate3d( 1, 0, 0, 90deg); }
  64%,69%  { transform: var(--_p) rotate3d( 1, 0, 0,-90deg); }
  81%,86%  { transform: var(--_p) rotate3d( 0, 1, 0, 90deg); }
  97%,100% { transform: var(--_p) rotate3d( 0, 0, 0,  0deg); }
}

من با استفاده از rotate3d() این بار اما همچنان به DevTools تکیه می کنم تا مقادیری را پیدا کنم که به نظر من "درست" است. سعی نکنید رابطه ای بین فریم های کلیدی پیدا کنید زیرا به سادگی وجود ندارد. من تبدیل های جداگانه را تعریف می کنم و سپس نتیجه "تصادفی" را تماشا می کنم. مطمئن شوید که اولین تصویر به ترتیب اولین و آخرین فریم باشد و روی هر یک از فریم های دیگر تصویر متفاوتی را نشان دهید.

شما موظف به استفاده از a نیستید rotate3d() همانطور که من تغییر دادم شما همچنین می توانید چرخش های مختلف را مانند مثال قبلی زنجیره بزنید. در اطراف بازی کنید و ببینید چه چیزی می توانید پیدا کنید! منتظرم تا نسخه خود را در قسمت نظرات با من به اشتراک بگذارید!

پسگفتار

امیدوارم از این سریال کوچک لذت برده باشید. ما تعدادی لغزنده سرگرم کننده (و خنده دار) ساختیم در حالی که در طول مسیر در مورد انواع مفاهیم CSS یاد گرفتیم - از قرار دادن شبکه و ترتیب انباشته کردن، تا تاخیر و تبدیل انیمیشن. ما حتی مجبور شدیم با یک خط Sass بازی کنیم تا از طریق آرایه ای از عناصر حلقه بزنیم.

و ما همه این کارها را دقیقاً با همان HTML برای هر لغزنده ای که ساختیم انجام دادیم. چقدر باحاله؟ CSS بسیار قدرتمند است و قادر است کارهای زیادی را بدون کمک جاوا اسکریپت انجام دهد.