Articles
مقدمة إلى CSS
خصائص 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 فقط۔ نظرًا لأنه يمكنك إنشاء تفاعلات خفيفة وجذابة بصريًا دون استخدام JavaScript، فإن ذلك يساهم في تحسين واجهة وتجربة المستخدم (UI/UX)۔

كيف تعمل الرسوم المتحركة ثلاثية الأبعاد

تستخدم الرسوم المتحركة ثلاثية الأبعاد في CSS بشكل أساسي الخصائص التالية:۔

  • تغير خاصية transform موضع العناصر أو تدويرها أو تحجيمها۔
  • تحدد خاصية perspective مسافة نقطة المراقبة للتعبير عن العمق الثلاثي الأبعاد۔
  • تحدد خاصية transform-style ما إذا كان يجب تحويل العناصر الفرعية في الفضاء ثلاثي الأبعاد۔
  • تتحكم خاصية backface-visibility في ظهور ظهر العنصر۔
  • تُستخدم خاصيتا animation و transition لتعريف الرسوم المتحركة۔

@keyframes والرسوم المتحركة ثلاثية الأبعاد

الدوران حول محور Y

لنبدأ بتعريف رسم متحرك ثلاثي الأبعاد يدور عنصراً حول محور Y باستخدام @keyframes۔

 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 العنصر بزاوية 360 درجة حول محور 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 العنصر بزاوية 360 درجة حول محور 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، يتم منع ظهر البطاقة من الظهور في الأمام۔
  • تطبيق rotateY(180deg) على فئة .card-back ينشئ ظهر البطاقة۔
  • تطبيق 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، تصبح نقطة الرؤية أقرب ويبرز العمق بشكل أكبر۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video

خصائص CSS المتعلقة بالرسوم المتحركة