سی ایس ایس لامحدود 3D سلائیڈرز

اس سلسلے میںہم HTML اور CSS کے علاوہ تصویری سلائیڈرز بنا رہے ہیں۔ خیال یہ ہے کہ ہم ایک ہی مارک اپ لیکن مختلف سی ایس ایس کا استعمال کرتے ہوئے بے حد مختلف نتائج حاصل کر سکتے ہیں، چاہے ہم کتنی ہی تصاویر کو ٹاس کریں۔ پھر ہم نے ایک ایسی بنائی جو تصاویر کے ڈھیر سے پلٹ جاتی ہے۔

اس بار، ہم تیسری جہت میں غوطہ لگا رہے ہیں۔ یہ سب سے پہلے مشکل نظر آنے والا ہے، لیکن بہت سے کوڈ جو ہم دیکھ رہے ہیں بالکل وہی ہے جو ہم نے اس سیریز کے پہلے دو مضامین میں کچھ ترمیم کے ساتھ استعمال کیا ہے۔ لہذا، اگر آپ ابھی سیریز میں شامل ہو رہے ہیں، تو میں تجویز کروں گا کہ ہم یہاں استعمال کیے جانے والے تصورات کے سیاق و سباق کے لیے دوسروں کو دیکھیں۔

یہ وہی ہے جس کا ہم مقصد کر رہے ہیں:

پہلی نظر میں، ایسا لگتا ہے کہ ہمارے پاس چار تصاویر کے ساتھ گھومنے والا مکعب ہے۔ لیکن حقیقت میں، ہم مجموعی طور پر چھ تصاویر کے ساتھ کام کر رہے ہیں۔ یہاں ایک مختلف زاویہ سے سلائیڈر ہے:

اب جب کہ ہمارے پاس تصویروں کو ترتیب دینے کے لیے ایک اچھا بصری ہے، آئیے کوڈ کو الگ کر کے دیکھیں کہ ہم وہاں کیسے پہنچتے ہیں۔

بنیادی سیٹ اپ

باقی سلائیڈرز جیسا ہی HTML جو ہم نے دوسرے سلائیڈرز کے لیے استعمال کیا ہے:

اور ایک بار پھر، ہم تصاویر کو ایک اسٹیک میں رکھنے کے لیے CSS گرڈ کا استعمال کر رہے ہیں، ایک دوسرے کے اوپر:

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

حرکت پذیری

اس سلائیڈر کی منطق بہت ملتی جلتی ہے۔ پہلے مضمون سے سرکلر سلائیڈر. درحقیقت، اگر آپ اوپر والی ویڈیو کو دوبارہ چیک کرتے ہیں، تو آپ دیکھ سکتے ہیں کہ تصاویر اس طرح رکھی گئی ہیں جس سے کثیرالاضلاع پیدا ہوتا ہے۔ مکمل گردش کے بعد، یہ پہلی تصویر پر واپس آ جاتا ہے۔

ہم نے CSS پر انحصار کیا۔ transform-origin اور animation-delay اس پہلے سلائیڈر کی خصوصیات۔ ایک ہی حرکت پذیری کا اطلاق تمام تصویری عناصر پر ہوتا ہے، جو ایک ہی نقطہ کے گرد گھومتے ہیں۔ پھر، مختلف تاخیر کا استعمال کرتے ہوئے، ہم صحیح طریقے سے تمام تصاویر کو ایک بڑے دائرے کے گرد رکھتے ہیں۔

عمل درآمد ہمارے 3D سلائیڈر کے لیے تھوڑا مختلف ہوگا۔ استعمال کرنا transform-origin یہاں کام نہیں کرے گا کیونکہ ہم 3D میں کام کر رہے ہیں، لہذا ہم استعمال کریں گے۔ transform تمام تصاویر کو صحیح طریقے سے رکھنے کے بجائے، پھر کنٹینر کو گھمائیں۔

ہم دوبارہ ساس تک پہنچ رہے ہیں تاکہ ہم تصاویر کی تعداد کو لوپ کر سکیں اور اپنی تبدیلیوں کو لاگو کر سکیں:

@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 */
  }
}

آپ سوچ رہے ہوں گے کہ ہم سیدھا ساس میں کیوں کود رہے ہیں۔ ہم نے دوسرے مضامین میں ونیلا سی ایس ایس کا استعمال کرتے ہوئے تصاویر کی ایک مقررہ تعداد کے ساتھ شروع کیا اس سے پہلے کہ کسی بھی نمبر کے حساب سے کوڈ کو ساس کے ساتھ عام کیا جائے (Nتصاویر کی )۔ ٹھیک ہے، مجھے لگتا ہے کہ آپ کو اب یہ خیال مل گیا ہے اور ہم حقیقی نفاذ تک پہنچنے کے لیے دریافت کے اس تمام کام کو ختم کر سکتے ہیں۔

۔ transform پراپرٹی تین قدریں لے رہی ہے، جس کی میں نے یہاں وضاحت کی ہے۔

ہم سب سے پہلے تمام تصاویر کو ایک دوسرے کے اوپر گھماتے ہیں۔ گردش کا زاویہ تصویروں کی تعداد پر منحصر ہے۔ کے لیے N امیجز، ہمارے پاس انکریمنٹ کے برابر ہے۔ 360deg/N. پھر ہم translate تمام امیجز کو ایک ہی مقدار میں اس طرح سے جس سے ان کے سینٹر پوائنٹس اطراف میں ملتے ہیں۔

کچھ بورنگ جیومیٹری ہے جو یہ بتانے میں مدد کرتی ہے کہ یہ سب کیسے کام کرتا ہے، لیکن فاصلہ برابر ہے۔ 50%/tan(180deg/N). ہم نے سرکلر سلائیڈر ( transform-origin: 50% 50%/sin(180deg/N) ).

آخر میں، ہم تصاویر کو ایکس محور کے گرد گھماتے ہیں۔ 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); }
}

کلیدی فریم تقریباً ایک جیسے ہیں۔ ہمارے پاس ایک ہی فیصد اقدار، ایک ہی لوپ اور ایک ہی گردش ہے۔

دونوں ایک جیسے کیوں ہیں؟ کیونکہ ان کی منطق ایک ہی ہے۔ دونوں صورتوں میں، تصاویر کو ایک گول شکل کے گرد ترتیب دیا گیا ہے اور ہمیں ہر تصویر کو دکھانے کے لیے پوری چیز کو گھمانے کی ضرورت ہے۔ اس طرح میں سرکلر سلائیڈر سے کلیدی فریموں کو کاپی کرنے اور اپنے 3D سلائیڈر کے لیے وہی کوڈ استعمال کرنے میں کامیاب ہوا۔ فرق صرف اتنا ہے کہ ہمیں کنٹینر کو گھمانے کی ضرورت ہے۔ -90deg تصاویر کو دیکھنے کے لیے x-axis کے ساتھ ساتھ کیونکہ ہم نے پہلے ہی انہیں گھمایا ہے۔ 90deg ایک ہی محور پر. پھر ہم کا ایک ٹچ شامل کریں perspective 3D اثر حاصل کرنے کے لیے۔

یہی ہے! ہمارا سلائیڈر ہو گیا ہے۔ یہاں ایک بار پھر مکمل ڈیمو ہے۔ آپ کو بس اتنا کرنا ہے کہ آپ جتنی تصاویر چاہیں شامل کریں اور اسے جاری رکھنے کے لیے ایک متغیر کو اپ ڈیٹ کریں۔

عمودی 3D سلائیڈر

چونکہ ہم 3D اسپیس میں کھیل رہے ہیں، کیوں نہ پچھلے سلائیڈر کا عمودی ورژن بنائیں؟ آخری ایک z-axis کے ساتھ گھومتا ہے، لیکن اگر ہم چاہیں تو ہم x-axis کے ساتھ بھی حرکت کر سکتے ہیں۔

اگر آپ اس سلائیڈر کے دونوں ورژن کے کوڈ کا موازنہ کرتے ہیں، تو ہو سکتا ہے کہ آپ کو فوری طور پر فرق نظر نہ آئے کیونکہ یہ صرف ایک حرف ہے! میں نے بدل دیا۔ rotate() ساتھ rotateX() کلیدی فریموں اور تصویر کے اندر transform. یہی ہے!

یہ غور کرنا چاہئے کہ rotate() کے برابر ہے rotateZ()، تو سے محور کو تبدیل کرکے Z کرنے کے لئے X ہم سلائیڈر کو افقی ورژن سے عمودی ورژن میں تبدیل کرتے ہیں۔

کیوب سلائیڈر

ہم بغیر CSS میں 3D کے بارے میں بات نہیں کر سکتے کیوب کے بارے میں بات کر رہے ہیں. اور ہاں، اس کا مطلب ہے کہ ہم سلائیڈر کا دوسرا ورژن بنانے جا رہے ہیں۔

سلائیڈر کے اس ورژن کے پیچھے خیال یہ ہے کہ تصاویر کے ساتھ ایک حقیقی مکعب شکل بنائیں اور پوری چیز کو مختلف محور کے گرد گھمائیں۔ چونکہ یہ ایک مکعب ہے، ہم چھ چہروں کے ساتھ کام کر رہے ہیں۔ ہم چھ تصاویر استعمال کریں گے، کیوب کے ہر چہرے کے لیے ایک۔ تو، کوئی ساس نہیں بلکہ ونیلا سی ایس ایس پر واپس۔

وہ حرکت پذیری تھوڑی بہت زیادہ ہے، ٹھیک ہے؟ آپ بھی کہاں سے شروع کرتے ہیں؟

ہمارے چھ چہرے ہیں، لہذا ہمیں کم از کم چھ گردش کرنے کی ضرورت ہے تاکہ ہر تصویر کو ایک موڑ ملے۔ ٹھیک ہے، اصل میں، ہمیں پانچ گردشوں کی ضرورت ہے - آخری والی ہمیں پہلی تصویر والے چہرے پر واپس لاتی ہے۔ اگر آپ ایک Rubik's Cube — یا کوئی اور مکعب کی شکل والی چیز جیسے ڈائس — پکڑیں ​​گے اور اسے اپنے ہاتھ سے گھمائیں گے، تو آپ کو اچھی طرح اندازہ ہو جائے گا کہ ہم کیا کر رہے ہیں۔

.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); }
}

۔ 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 پہلی تصویر کے علاوہ تمام تصاویر کے لیے کیونکہ مجھے اس کے لیے صرف ترجمہ کی ضرورت ہے۔ وہ کوما متغیر کو واپس ایک null قدر پر گرا دیتا ہے۔ کوما کے بغیر، ہمارے پاس فال بیک نہیں ہوگا اور پوری قدر غلط ہوگی۔

سے تفصیلات:

نوٹ: یعنی var(--a,) ایک درست فنکشن ہے، یہ بتاتا ہے کہ اگر --a حسب ضرورت پراپرٹی غلط یا غائب ہے، var()` کچھ نہیں کے ساتھ تبدیل کیا جانا چاہئے.

رینڈم کیوب سلائیڈر

اس طرح کی حرکت پذیری کے لیے تھوڑا سا بے ترتیب ہونا ایک اچھا اضافہ ہو سکتا ہے۔ لہٰذا، کیوب کو ترتیب وار گھمانے کے بجائے، ہم ڈائس کو اس طرح رول کر سکتے ہیں کہ بولیں، اور کیوب کو رول کرنے دیں جیسا کہ چاہے۔

ٹھنڈا ہے نا؟ میں آپ کے بارے میں نہیں جانتا، لیکن مجھے یہ ورژن زیادہ پسند ہے! یہ زیادہ دلچسپ ہے اور ٹرانزیشنز دیکھنے میں اطمینان بخش ہیں۔ اور اندازہ کرو کہ کیا؟ آپ اپنا بے ترتیب کیوب سلائیڈر بنانے کے لیے اقدار کے ساتھ کھیل سکتے ہیں!

منطق اصل ہے بالکل بھی بے ترتیب نہیں - یہ صرف اسی طرح ظاہر ہوتا ہے۔ آپ تعریف کرتے ہیں a 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 تصورات کے بارے میں بہت کچھ سیکھتے ہوئے کچھ تفریحی (اور مضحکہ خیز) سلائیڈرز بنائے — گرڈ پلیسمنٹ اور اسٹیکنگ آرڈر سے لے کر اینیمیشن میں تاخیر اور تبدیلیوں تک۔ یہاں تک کہ ہمیں عناصر کی ایک صف سے گزرنے کے لئے ساس کے ڈیش کے ساتھ کھیلنا پڑا۔

اور ہم نے یہ سب کچھ اپنے بنائے ہوئے ہر سلائیڈر کے لیے بالکل اسی ایچ ٹی ایم ایل کے ساتھ کیا۔ یہ کتنا ٹھنڈا ہے؟ سی ایس ایس طاقتور ہے اور جاوا اسکرپٹ کی مدد کے بغیر بہت کچھ پورا کرنے کے قابل ہے۔