Articles
সিএসএস-এর পরিচিতি
৩ডি অ্যানিমেশন সম্পর্কিত CSS বৈশিষ্ট্যসমূহ

৩ডি অ্যানিমেশন সম্পর্কিত CSS বৈশিষ্ট্যসমূহ

এই নিবন্ধটি ৩ডি অ্যানিমেশনের সাথে সম্পর্কিত CSS বৈশিষ্ট্যগুলি ব্যাখ্যা করে।

আমরা ব্যাখ্যা করবো কিভাবে CSS-এ ৩ডি অ্যানিমেশন কাজ করে এবং কিভাবে প্রকৃত কোড উদাহরণসহ এগুলো ব্যবহার করা যায়। আপনি ব্যবহারিকভাবে শিখবেন কিভাবে transform প্রোপার্টি ব্যবহার করে ৩ডি রূপান্তর প্রয়োগ করতে হয় এবং কিভাবে perspective ও transform-style দিয়ে গভীরতা ও থ্রি-ডাইমেনশনাল প্রভাব যোগ করা যায়।

YouTube Video

প্রিভিউর জন্য HTML

css-animation-3d.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS 3D Animation</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-animation-3d.css">
  9</head>
 10<body>
 11    <header>
 12        <h1>CSS Properties For 3D Animation</h1>
 13    </header>
 14    <main>
 15        <header>
 16            <h2>3D Animation Related Properties</h2>
 17        </header>
 18
 19        <!-- 3D Keyframes Section -->
 20        <article>
 21            <h3>@keyframes with 3D Effects</h3>
 22            <section>
 23                <header><h4>animation: rotateY3D 4s linear infinite</h4></header>
 24                <section class="sample-view">
 25                    <section class="sample-view-3d">
 26                        <div class="box-animation-rotateY">Rotate Y</div>
 27                    </section>
 28                </section>
 29                <header><h4>animation: rotateX3D 4s linear infinite</h4></header>
 30                <section class="sample-view">
 31                    <section class="sample-view-3d">
 32                        <div class="box-animation-rotateX">Rotate X</div>
 33                    </section>
 34                </section>
 35                <header><h4>animation: cube-spin 6s ease-in-out infinite</h4></header>
 36                <section class="sample-view">
 37                    <section class="sample-view-3d">
 38                        <div class="box-animation-cube">Spinning Cube</div>
 39                    </section>
 40                </section>
 41            </section>
 42        </article>
 43
 44        <article>
 45            <h3>Hover to Flip the Card</h3>
 46            <section>
 47                <header><h4>HTML</h4></header>
 48<pre>
 49&lt;div class=&quot;card-container&quot;&gt;
 50    &lt;div class=&quot;card&quot;&gt;
 51        &lt;div class=&quot;card-face card-front&quot;&gt;
 52        &lt;h3&gt;Front&lt;/h3&gt;
 53        &lt;p&gt;This is the front side&lt;/p&gt;
 54        &lt;/div&gt;
 55        &lt;div class=&quot;card-face card-back&quot;&gt;
 56        &lt;h3&gt;Back&lt;/h3&gt;
 57        &lt;p&gt;This is the back side&lt;/p&gt;
 58        &lt;/div&gt;
 59    &lt;/div&gt;
 60&lt;/div&gt;
 61</pre>
 62            </section>
 63            <section class="sample-view" style="height: 270px;">
 64                <section class="sample-view-3d-card">
 65                    <div class="card-container">
 66                        <div class="card">
 67                            <div class="card-face card-front">
 68                            <h3>Front</h3>
 69                            <p>This is the front side</p>
 70                            </div>
 71                            <div class="card-face card-back">
 72                            <h3>Back</h3>
 73                            <p>This is the back side</p>
 74                            </div>
 75                        </div>
 76                    </div>
 77                </section>
 78            </section>
 79        </article>
 80
 81        <article>
 82            <h3>3D Animation Cube Example</h3>
 83            <section>
 84                <header><h4>animation: cube-spin 6s ease-in-out infinite</h4></header>
 85                <section class="sample-view" style="height: 300px;">
 86                    <div class="scene">
 87                        <div class="cube">
 88                            <div class="face front">Front</div>
 89                            <div class="face back">Back</div>
 90                            <div class="face left">Left</div>
 91                            <div class="face right">Right</div>
 92                            <div class="face top">Top</div>
 93                            <div class="face bottom">Bottom</div>
 94                        </div>
 95                    </div>
 96                </section>
 97            </section>
 98        </article>
 99    </main>
100</body>
101</html>

৩ডি অ্যানিমেশন ও ট্রানজিশন

আধুনিক ওয়েব ব্রাউজার শুধুমাত্র CSS ব্যবহার করেই তিন-মাত্রিক ৩ডি অ্যানিমেশন তৈরি করতে দেয়। আপনি যখন জাভাস্ক্রিপ্ট ছাড়াই হালকা এবং আকর্ষণীয় ইন্টারঅ্যাকশন তৈরি করতে পারবেন, তখন এটি UI/UX উন্নতিতে সহায়তা করে।

৩ডি অ্যানিমেশন কিভাবে কাজ করে

CSS ৩ডি অ্যানিমেশন প্রধানত নিচের বৈশিষ্ট্যগুলো ব্যবহার করে:।

  • transform বৈশিষ্ট্যটি উপাদানের অবস্থান, ঘূর্ণন ও স্কেল পরিবর্তন করে।
  • perspective বৈশিষ্ট্যটি ৩ডি গভীরতা প্রকাশ করার জন্য ভিউপয়েন্টের দূরত্ব নির্ধারণ করে।
  • transform-style বৈশিষ্ট্যটি নির্দিষ্ট করে সন্তানের উপাদানসমূহ ৩ডি স্পেসে রূপান্তরিত হবে কি না।
  • backface-visibility বৈশিষ্ট্যটি উপাদানের পিছনের অংশ দৃশ্যমান হবে কিনা তা নিয়ন্ত্রণ করে।
  • animation ও transition বৈশিষ্ট্যগুলো অ্যানিমেশন সংজ্ঞায়িত করতে ব্যবহৃত হয়।

@keyframes এবং ৩ডি অ্যানিমেশন

Y-অক্ষের চারপাশে ঘূর্ণন

চলুন, @keyframes ব্যবহার করে একটি উপাদানকে Y-অক্ষের চারপাশে ঘূর্ণিত করে এমন একটি ৩ডি অ্যানিমেশন সংজ্ঞায়িত করি।

 1.sample-view-3d {
 2    width: 100px;
 3    height: 100px;
 4    margin: 1rem auto;
 5    perspective: 800px;
 6}
 7
 8.box-animation-rotateY,
 9.box-animation-rotateX,
10.box-animation-cube {
11    width: 100%;
12    height: 100%;
13    background: linear-gradient(45deg, #4facfe, #00f2fe);
14    display: flex;
15    align-items: center;
16    justify-content: center;
17    color: white;
18    font-size: 1.1rem;
19    border-radius: 10px;
20    transform-style: preserve-3d;
21}
22
23/* RotateY animation */
24@keyframes rotateY3D {
25    from { transform: rotateY(0deg); }
26    to { transform: rotateY(360deg); }
27}
28
29.box-animation-rotateY {
30    animation: rotateY3D 4s linear infinite;
31}
  • rotateY3D অ্যানিমেশনটি উপাদানকে Y-অক্ষের চারপাশে ৩৬০ ডিগ্রি ঘুরায়।
  • transform-style প্রোপার্টিটি preserve-3d এ সেট করা হয় যাতে সন্তানের উপাদানসমূহের ৩ডি রূপান্তর বজায় থাকে।
  • perspective বৈশিষ্ট্যটি গভীরতার অনুভূতি সামঞ্জস্য করার জন্য ভিউপয়েন্ট দূরত্ব নির্ধারণ করে। এখানে 800px নির্ধারণ করা হয়েছে।

X-অক্ষের চারপাশে ঘূর্ণন

এবার চলুন, X-অক্ষের চারপাশে একটি উপাদানকে ঘোরায় এমন একটি ৩ডি অ্যানিমেশনও সংজ্ঞায়িত করি।

1/* RotateX animation */
2@keyframes rotateX3D {
3    from { transform: rotateX(0deg); }
4    to { transform: rotateX(360deg); }
5}
6
7.box-animation-rotateX {
8    animation: rotateX3D 4s linear infinite;
9}
  • rotateX3D অ্যানিমেশনটি উপাদানকে X-অক্ষের চারপাশে ৩৬০ ডিগ্রি ঘুরায়।

X-অক্ষ ও Y-অক্ষ উভয়ের চারপাশে ঘূর্ণন

চলুন, X ও Y অক্ষ উভয়ের উপর ঘূর্ণন সমন্বিত একটি ৩ডি অ্যানিমেশন সংজ্ঞায়িত করি।

 1/* Cube spin (combination of X and Y rotation) */
 2@keyframes cube-spin {
 3    0%   { transform: rotateX(0deg) rotateY(0deg); }
 4    50%  { transform: rotateX(180deg) rotateY(180deg); }
 5    100% { transform: rotateX(360deg) rotateY(360deg); }
 6}
 7
 8.box-animation-cube {
 9    animation: cube-spin 6s ease-in-out infinite;
10}
  • একাধিক অক্ষের মাধ্যমে ঘূর্ণন আরও শক্তিশালী ৩ডি ইফেক্ট তৈরি করে।

একটি ৩ডি কার্ডের সামনের ও পিছনের দিক উল্টানো

চলুন, একটি ৩ডি কার্ডের সামনের ও পিছনের দিক উল্টানো হয় এমন হোভার অ্যানিমেশন ইফেক্ট সংজ্ঞায়িত করি।

 1/* 3D perspective wrapper */
 2.sample-view-3d-card {
 3  perspective: 1000px;
 4  width: 300px;
 5  height: 200px;
 6  margin: 2rem auto;
 7}
 8
 9/* Outer card container */
10.card-container {
11  width: 100%;
12  height: 100%;
13  position: relative;
14  perspective: 1000px;
15}
16
17/* The card itself */
18.card {
19  width: 100%;
20  height: 100%;
21  position: relative;
22  transform-style: preserve-3d;
23  transition: transform 0.8s ease;
24}
25
26/* Both faces */
27.card-face {
28  position: absolute;
29  width: 100%;
30  height: 100%;
31  backface-visibility: hidden;
32  border-radius: 12px;
33  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
34  display: flex;
35  flex-direction: column;
36  justify-content: center;
37  align-items: center;
38  font-family: sans-serif;
39  color: white;
40  font-size: 1.1rem;
41  padding: 1rem;
42}
43
44/* Flip the card on hover */
45.card-container:hover .card {
46  transform: rotateY(180deg);
47}
48
49/* Front side style */
50.card-front {
51  background: linear-gradient(135deg, #00c9ff, #92fe9d);
52}
53
54/* Back side style */
55.card-back {
56  background: linear-gradient(135deg, #fc466b, #3f5efb);
57  transform: rotateY(180deg);
58}
  • backface-visibility বৈশিষ্ট্য hidden দিলে পিছনের দিকটি সামনের দিকে প্রদর্শিত হতে বাধা দেয়া হয়।
  • .card-back ক্লাসে rotateY(180deg) প্রয়োগ করে কার্ডের পিছনের অংশ তৈরি করা হয়।
  • হোভার করলে rotateY(180deg) প্রয়োগে কার্ডটি উল্টে যায়।

কিউব ৩ডি অ্যানিমেশন

চলুন, একটি কিউবের জন্য ৩ডি অ্যানিমেশন সংজ্ঞায়িত করি। কিউবের প্রতিটি দিক ঘূর্ণনের সময় দৃশ্যমান হয়, হোভার বা স্বয়ংক্রিয় অ্যানিমেশনের মাধ্যমে ৩ডি ইফেক্ট প্রকাশ করে।

 1.scene {
 2  width: 200px;
 3  height: 200px;
 4  perspective: 800px; /* Viewing distance (the smaller the value, the stronger the depth effect) */
 5  background-color: rgba(255, 255, 255, 0);
 6  border: 0;
 7}
 8
 9.cube {
10  width: 100%;
11  height: 100%;
12  transform-style: preserve-3d;
13  transform: rotateX(0deg) rotateY(0deg);
14  animation: rotateCube 10s infinite linear;
15  position: relative;
16  background-color: rgba(255, 255, 255, 0);
17  border: 0;
18}
19
20.face {
21  position: absolute;
22  width: 200px;
23  height: 200px;
24  background: rgba(0, 128, 255, 0.6);
25  border: 1px solid #fff;
26  display: flex;
27  align-items: center;
28  justify-content: center;
29  font-size: 24px;
30  font-weight: bold;
31}
32
33/* Positioning each face */
34.front  { transform: translateZ(100px); }
35.back   { transform: rotateY(180deg) translateZ(100px); }
36.left   { transform: rotateY(-90deg) translateZ(100px); }
37.right  { transform: rotateY(90deg) translateZ(100px); }
38.top    { transform: rotateX(90deg) translateZ(100px); }
39.bottom { transform: rotateX(-90deg) translateZ(100px); }
40
41/* Rotation animation */
42@keyframes rotateCube {
43  from {
44    transform: rotateX(0deg) rotateY(0deg);
45  }
46  to {
47    transform: rotateX(360deg) rotateY(360deg);
48  }
49}
  • .cube ক্লাসটি ৩ডি হিসেবে প্রদর্শিত হয় কারণ এর transform-style প্রোপার্টি preserve-3d সেট করা আছে।
  • কিউবের প্রতিটি দিক translateZ(100px) ব্যবহার করে কিউবের কেন্দ্র থেকে সামনের দিকে ঠেলে দিয়ে ৩ডি কিউব তৈরি করা হয়।
  • rotateCube অ্যানিমেশন Y ও X অক্ষ একত্রিত করে কিউবটি স্বয়ংক্রিয়ভাবে ঘোরায়।

perspective দিয়ে ভিউপয়েন্ট পরিবর্তিত হয়

perspective মান কমালে উপাদানের সাথে ভিউপয়েন্ট কাছাকাছি আসে, যার ফলে গভীরতা আরও দৃঢ় হয় এবং ৩ডি ইফেক্ট বাড়ে। বিপরীতে, মান বাড়ালে ভিউপয়েন্ট দূরে চলে যায়, ফলে আরও স্বাভাবিক ও সূক্ষ্ম ৩ডি প্রদর্শন পাওয়া যায়। এখানে, চলুন কিউবের ৩ডি অ্যানিমেশন প্রদর্শনের জন্য perspective প্রোপার্টি 800px থেকে 200px করি।

1.scene {
2  perspective: 200px;
3}
  • perspective প্রোপার্টি 800px থেকে 200px করলে ভিউপয়েন্ট কাছাকাছি আসে এবং গভীরতা আরও দৃঢ়ভাবে প্রকাশ পায়।

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video

অ্যানিমেশন সম্পর্কিত CSS বৈশিষ্ট্যগুলি