CSS অসীম 3D স্লাইডার

এই সিরিজে, আমরা HTML এবং CSS ছাড়া আর কিছুই দিয়ে ইমেজ স্লাইডার তৈরি করছি। ধারণাটি হল যে আমরা একই মার্কআপ ব্যবহার করতে পারি কিন্তু ভিন্ন 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 পরিবর্তে সঠিকভাবে সমস্ত ছবি স্থাপন, তারপর ধারক ঘোরান.

আমরা আবার 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 */
  }
}

আপনি হয়তো ভাবছেন কেন আমরা সরাসরি সাসে ঝাঁপিয়ে পড়ছি। আমরা অন্য নিবন্ধগুলিতে ভ্যানিলা CSS ব্যবহার করে একটি নির্দিষ্ট সংখ্যক ছবি দিয়ে শুরু করেছি যেকোন সংখ্যার জন্য Sass-এর সাথে কোডটি সাধারণ করার আগে (N) ছবির। ঠিক আছে, আমি মনে করি আপনি এখন ধারণাটি পেয়েছেন এবং বাস্তব বাস্তবায়নের জন্য আমরা সেই সমস্ত আবিষ্কারের কাজ কেটে ফেলতে পারি।

সার্জারির 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); }
}

কীফ্রেমগুলো প্রায় একই রকম। আমাদের একই শতাংশ মান, একই লুপ এবং একই ঘূর্ণন রয়েছে।

কেন উভয় একই? কারণ তাদের যুক্তি একই। উভয় ক্ষেত্রেই, চিত্রগুলি একটি বৃত্তাকার আকৃতির চারপাশে সাজানো হয় এবং প্রতিটি চিত্র দেখানোর জন্য আমাদের পুরো জিনিসটি ঘোরাতে হবে। এভাবেই আমি বৃত্তাকার স্লাইডার থেকে কীফ্রেমগুলি অনুলিপি করতে এবং আমাদের 3D স্লাইডারের জন্য একই কোড ব্যবহার করতে সক্ষম হয়েছিলাম। শুধুমাত্র পার্থক্য হল যে আমাদের ধারকটিকে ঘোরাতে হবে -90deg x-অক্ষ বরাবর ইমেজ দেখতে যেহেতু আমরা ইতিমধ্যে তাদের দ্বারা ঘোরানো হয়েছে 90deg একই অক্ষে। তারপর আমরা একটি স্পর্শ যোগ করুন perspective 3D প্রভাব পেতে.

এটাই! আমাদের স্লাইডার সম্পন্ন হয়. এখানে আবার সম্পূর্ণ ডেমো আছে. আপনাকে যা করতে হবে তা হল আপনি যতগুলি চান ততগুলি ইমেজ যুক্ত করতে হবে এবং এটি চালু করার জন্য একটি পরিবর্তনশীল আপডেট করতে হবে।

উল্লম্ব 3D স্লাইডার

যেহেতু আমরা 3D স্পেসে খেলছি, কেন আগের স্লাইডারটির একটি উল্লম্ব সংস্করণ তৈরি করব না? শেষটি z-অক্ষ বরাবর ঘোরে, তবে আমরা চাইলে x-অক্ষ বরাবরও চলতে পারি।

আপনি যদি এই স্লাইডারের উভয় সংস্করণের জন্য কোড তুলনা করেন, তাহলে আপনি হয়ত অবিলম্বে পার্থক্যটি খুঁজে পাবেন না কারণ এটি শুধুমাত্র একটি অক্ষর! আমি প্রতিস্থাপন করেছি rotate() সঙ্গে rotateX() কীফ্রেম এবং চিত্রের ভিতরে transform। এটাই!

এটা উল্লেখ করা উচিত যে rotate() সমতুল্য rotateZ(), তাই থেকে অক্ষ পরিবর্তন করে Z থেকে X আমরা স্লাইডারটিকে অনুভূমিক সংস্করণ থেকে উল্লম্ব সংস্করণে রূপান্তর করি।

কিউব স্লাইডার

আমরা সিএসএস ছাড়া 3D সম্পর্কে কথা বলতে পারি না কিউব সম্পর্কে কথা বলা. এবং হ্যাঁ, তার মানে আমরা স্লাইডারের আরেকটি সংস্করণ তৈরি করতে যাচ্ছি।

স্লাইডারের এই সংস্করণটির পিছনে ধারণাটি হল চিত্রগুলির সাথে একটি প্রকৃত ঘনক্ষেত্রের আকার তৈরি করা এবং সম্পূর্ণ জিনিসটিকে বিভিন্ন অক্ষের চারপাশে ঘোরানো। যেহেতু এটি একটি ঘনক, আমরা ছয়টি মুখ নিয়ে কাজ করছি। আমরা ছয়টি ছবি ব্যবহার করব, কিউবের প্রতিটি মুখের জন্য একটি। সুতরাং, কোন 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); }
}

সার্জারির 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-এর উপর নির্ভর করছি যে মানগুলি আমার কাছে "সঠিক" মনে হয়। কীফ্রেমগুলির মধ্যে একটি সম্পর্ক খুঁজে বের করার চেষ্টা করবেন না কারণ সেখানে কেবল একটি নেই৷ আমি পৃথক রূপান্তর সংজ্ঞায়িত করছি এবং তারপর "এলোমেলো" ফলাফল দেখছি। নিশ্চিত করুন যে প্রথম চিত্রটি যথাক্রমে প্রথম এবং শেষ ফ্রেম, এবং অন্য প্রতিটি ফ্রেমে একটি ভিন্ন চিত্র দেখান৷

আপনি একটি ব্যবহার করতে বাধ্য নন rotate3d() আমার মত রূপান্তর. আপনি বিভিন্ন ঘূর্ণন চেইন করতে পারেন যেমন আমরা আগের উদাহরণে করেছি। চারপাশে খেলুন এবং দেখুন আপনি কি নিয়ে আসতে পারেন! মন্তব্য বিভাগে আমার সাথে আপনার সংস্করণ ভাগ করার জন্য আমি অপেক্ষা করব!

মোড়ক উম্মচন

আমি আশা করি আপনি এই ছোট সিরিজ উপভোগ করেছেন. আমরা কিছু মজার (এবং মজার) স্লাইডার তৈরি করেছি যখন পথে সব ধরনের CSS ধারণা সম্পর্কে অনেক কিছু শিখেছি — গ্রিড বসানো এবং স্ট্যাকিং অর্ডার, অ্যানিমেশন বিলম্ব এবং রূপান্তর পর্যন্ত। আমরা এমনকি উপাদানগুলির একটি অ্যারের মাধ্যমে লুপ করার জন্য Sass এর ড্যাশের সাথে খেলতে পেরেছি।

এবং আমরা প্রত্যেকটি স্লাইডারের জন্য ঠিক একই HTML দিয়ে এটি করেছি। কিভাবে শীতল হয়? CSS শক্তিশালী এবং জাভাস্ক্রিপ্টের সাহায্য ছাড়াই অনেক কিছু করতে সক্ষম।