خصائص 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<div class="card-container">
50 <div class="card">
51 <div class="card-face card-front">
52 <h3>Front</h3>
53 <p>This is the front side</p>
54 </div>
55 <div class="card-face card-back">
56 <h3>Back</h3>
57 <p>This is the back side</p>
58 </div>
59 </div>
60</div>
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 أيضًا.۔