Articles
CSS का परिचय
3D एनिमेशन से संबंधित CSS गुण

3D एनिमेशन से संबंधित CSS गुण

यह लेख 3D एनिमेशन से संबंधित CSS गुणों की व्याख्या करता है।

हम बताएंगे कि CSS में 3D एनिमेशन कैसे काम करते हैं और उन्हें वास्तविक कोड उदाहरणों के साथ कैसे उपयोग करें। आप व्यावहारिक रूप से सीखेंगे कि transform प्रॉपर्टी का उपयोग करके 3D ट्रांसफॉर्मेशन कैसे लागू करें और 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>

3D एनिमेशन और ट्रांजिशन

आधुनिक वेब ब्राउज़र आपको केवल CSS का उपयोग करके त्रि-आयामी 3D एनिमेशन बनाने की अनुमति देते हैं। चूंकि आप बिना JavaScript के हल्के और आकर्षक इंटरैक्शन बना सकते हैं, इससे UI/UX में सुधार होता है।

3D एनिमेशन कैसे काम करता है

CSS 3D एनिमेशन मुख्य रूप से निम्नलिखित गुणों का उपयोग करते हैं:।

  • transform प्रॉपर्टी तत्वों की स्थिति, घूर्णन और स्केल को बदलती है।
  • perspective प्रॉपर्टी 3D गहराई को व्यक्त करने के लिए दृश्य बिंदु की दूरी सेट करती है।
  • transform-style प्रॉपर्टी निर्दिष्ट करती है कि क्या चाइल्ड तत्वों को 3D स्पेस में ट्रांसफॉर्म करना चाहिए।
  • backface-visibility प्रॉपर्टी तत्वों के पिछले हिस्से की दृश्यता को नियंत्रित करती है।
  • animation और transition प्रॉपर्टीज़ का उपयोग एनिमेशन को परिभाषित करने के लिए किया जाता है।

@keyframes और 3D एनिमेशन

Y-अक्ष के चारों ओर घूर्णन

आइए सबसे पहले एक 3D एनिमेशन को परिभाषित करें जो एक तत्व को @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-अक्ष के चारों ओर 360 डिग्री घुमाता है।
  • transform-style प्रॉपर्टी को preserve-3d पर सेट किया गया है ताकि चाइल्ड तत्वों के 3D ट्रांसफॉर्मेशन को बनाए रखा जा सके।
  • perspective प्रॉपर्टी गहराई के अनुभव को समायोजित करने के लिए दृश्य बिंदु की दूरी सेट करती है। यहां, 800px सेट किया गया है।

X-अक्ष के चारों ओर घूर्णन

आइए एक 3D एनिमेशन परिभाषित करें जो एक तत्व को 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-अक्ष के चारों ओर 360 डिग्री घुमाता है।

X-अक्ष और Y-अक्ष दोनों के चारों ओर घूर्णन

आइए एक 3D एनिमेशन को परिभाषित करें जो 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}
  • कई अक्षों पर घुमाव एक मजबूत 3D प्रभाव बनाता है।

3D कार्ड का आगे और पीछे पलटना

आइए एक होवर एनिमेशन इफेक्ट को परिभाषित करें जो 3D कार्ड के आगे और पीछे को पलटता है।

 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) लागू करने से कार्ड पलट जाता है।

घन 3D एनिमेशन

आइए एक घन के लिए 3D एनिमेशन को परिभाषित करें। घूमने के दौरान घन के प्रत्येक पक्ष दिखाई देते हैं, जो होवर या स्वचालित एनिमेशन के माध्यम से 3D प्रभाव को दर्शाते हैं।

 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 क्लास 3D में प्रदर्शित होती है क्योंकि उसकी transform-style प्रॉपर्टी preserve-3d पर सेट है।
  • घन के प्रत्येक पक्ष को उसके केंद्र से translateZ(100px) के माध्यम से आगे बढ़ाया जाता है, जिससे एक 3D घन बनता है।
  • rotateCube एनिमेशन Y और X अक्षों को मिलाकर घन को स्वचालित रूप से घुमाता है।

perspective के साथ दृष्टिकोण बदलता है

perspective मान को कम करने से दृष्टिकोण तत्व के करीब आ जाता है, जिससे गहराई का प्रभाव बढ़ता है और 3D इफेक्ट और प्रबल होता है। विपरीत रूप से, मान बढ़ाने से दृष्टिकोण दूर चला जाता है, जिससे 3D उपस्थिति अधिक स्वाभाविक और सूक्ष्म हो जाती है। यहां, चलिए घन के 3D एनिमेशन को दिखाने के लिए perspective प्रॉपर्टी को 800px से 200px में बदलते हैं।

1.scene {
2  perspective: 200px;
3}
  • perspective प्रॉपर्टी को 800px से 200px में बदलने से दृष्टिकोण करीब हो जाता है और गहराई और अधिक प्रमुख हो जाती है।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video

एनीमेशन से संबंधित CSS प्रॉपर्टी