التعليق: قرأت مقالًا حول كيفية استخدام CSS3 لإنشاء رباعيات ثلاثي الأبعاد. اعتقدت أنه كان جيدًا جدًا ، لذلك أخرجته وشاركته معك كيفية استخدام Div+CSS لإنشاء مثلثات. هنا سألصق الرمز ذي الصلة أولاً ، ثم أشرح المبدأ لك
قرأت اليوم مقالًا حول كيفية استخدام CSS3 لإنشاء رباعيات ثلاثي الأبعاد. اعتقدت أنه كان جيدًا جدًا ، لذلك أخرجته وشاركته معك.أول شيء أريد مشاركته معك هو كيفية استخدام Div+CSS لإنشاء مثلثات. هنا سأقوم أولاً بصق الكود ذي الصلة ثم شرح المبادئ لك.
HTML:
<viv>
<viv> </viv>
</div>
CSS:
<type type = "text/css">
#pyramid {
الموقف: قريب
الهامش: 100px Auto ؛
الارتفاع: 500 بكسل ؛
العرض: 100px ؛
}
#pyramid> div {
الموقف: مطلق ؛
على غرار الحدود: صلبة.
عرض الحدود: 200px 0 200px 346px ؛
}
#pyramid> div: بعد {
الموقف: مطلق ؛
المحتوى: "مثلث" ؛
اللون: #ffff ؛
اليسار: -250 بكسل ؛
محاذاة النص: المركز ؛
}
#pyramid> div: أول طفل {
بلون الحدود: #FF0000 شفاف #FF0000 RGBA (50 ، 50 ، 50 ، 0.6) ؛
}
</style>
تأثير الجري:
تحليل المبدأ:
في رمز HTML ، نحدد اثنين من divs ، Div الخارجي هو كائن حاوية ، ويستخدم Div الداخلي لإنشاء مثلثات. في رمز CSS ، لا نضع العرض والارتفاع لـ Div الداخلي ، ولكن فقط نضع عرض الحواف الثلاثة للحدود (العلوي والأسفل واليسار). من خلال وضع ألوان مختلفة للجانبين الثلاثة ، ستصبح ثلاثة مثلثات مختلفة على التوالي.
في هذا الوقت ، نحتاج فقط إلى ضبط الألوان على الجوانب العلوية والسفلية لألوان شفافة ، وسيظهر مثلث متساوي الأضلاع.
#pyramid> div: أول طفل {
لون الحدود: شفافة شفافة شفافة RGBA (50 ، 50 ، 50 ، 0.6) ؛
}
صورة التكاثر:
من بينها ، المكان الموضح في الدائرة الحمراء هو المكان الذي يقع فيه Div الداخلي. إنه كائن غير مرئي بعرض 0 وارتفاع 0 ، ولكنه موجود بالفعل.
ما سنتحدث عنه التالي هو كيفية تنفيذ رباعيات ثلاثي الأبعاد وكيفية إنشاء الرسوم المتحركة.
أولاً ، الصق الكود ذي الصلة.
HTML:
<viv>
<viv> </viv>
<viv> </viv>
<viv> </viv>
<viv> </viv>
</div>
CSS:
<type type = "text/css">
#pyramid {
الموقف: قريب
الهامش: 100px Auto ؛
الارتفاع: 500 بكسل ؛
العرض: 100px ؛
-webkit-transform-style: Preserve-3D ؛
-webkit-animation: Spin 10S Linar Linear ؛
-webkit-transform-Origin: 116px 200px 116px ؛
-الموز النموذجية: الحفاظ على 3D ؛
-Moz-animation: Spin 10S Linar Linear ؛
-Moz-transform-Origin: 116px 200px 116px ؛
-MS-MOR-TRANDSTORM: PROSERVE-3D ؛
-Ms-animation: Spin 10S Linar Linear ؛
-Ms-transform-Origin: 116px 200px 116px ؛
أسلوب التحويل: Preserve-3D ؛
الرسوم المتحركة: تدور 10s خطي اللانهائي ؛
التحويل الأولي: 116px 200px 116px ؛
}
@-webkit-keyframes تدور {
من {
-webkit-transform: rotatex (0deg) rotatey (0deg) rotatez (0deg) ؛
}
ل {
-webkit-transform: rotatex (360deg) rotatey (360deg) rotatez (360deg) ؛
}
}
@-moz-keyframes تدور {
من {
-moz-transform: rotatex (0deg) rotatey (0deg) rotatez (0deg) ؛
}
ل {
-moz-transform: rotatex (360deg) rotatey (360deg) rotatez (360deg) ؛
}
}
@-ms-keyframes تدور {
من {
-Ms-transform: rotatex (0deg) rotatey (0deg) rotatez (0deg) ؛
}
ل {
-MS-transform: rotatex (360deg) rotatey (360deg) rotatez (360deg) ؛
}
}
@keyframes تدور {
من {
التحويل: rotatex (0deg) rotatey (0deg) rotatez (0deg) ؛
}
ل {
التحويل: rotatex (360deg) rotatey (360deg) rotatez (360deg) ؛
}
}
#pyramid> div {
الموقف: مطلق ؛
على غرار الحدود: صلبة.
عرض الحدود: 200px 0 200px 346px ؛
-webkit-transform-Origin: 0 0 ؛
-Moz-Transform-Origin: 0 0 ؛
-Ms-transform-arigin: 0 0 ؛
التحويل الأولي: 0 0 ؛
}
#pyramid> div: بعد {
الموقف: مطلق ؛
المحتوى: "مثلث" ؛
اللون: #ffff ؛
اليسار: -250 بكسل ؛
محاذاة النص: المركز ؛
}
#pyramid> div: أول طفل {
لون الحدود: شفافة شفافة شفافة RGBA (50 ، 50 ، 50 ، 0.6) ؛
-webkit-transform: rotatey (-19.5deg) Rotatex (180deg) Translatey (-400px) ؛
-moz-transform: rotatey (-19.5deg) rotatex (180deg) Translatey (-400px) ؛
-MS-transform: rotatey (-19.5deg) rotatex (180deg) Translatey (-400px) ؛
التحويل: rotatey (-19.5deg) Rotatex (180deg) Translatey (-400px) ؛
}
#pyramid> div: nth-child (2) {
لون الحدود: شفافة شفافة شفافة RGBA (50 ، 50 ، 50 ، 0.6) ؛
-webkit-transform: rotatey (90deg) rotatez (60deg) rotatex (180deg) Translatey (-400px) ؛
-moz-transform: Rotatey (90deg) rotatez (60deg) rotatex (180deg) Translatey (-400px) ؛
-MS-transform: Rotatey (90deg) rotatez (60deg) rotatex (180deg) Translatey (-400px) ؛
التحويل: rotatey (90deg) rotatez (60deg) Rotatex (180deg) Translatey (-400px) ؛
}
#pyramid> div: nth-child (3) {
لون الحدود: شفافة شفافة شفافة RGBA (50 ، 50 ، 50 ، 0.9) ؛
-webkit-transform: rotatex (60deg) rotatey (19.5deg) ؛
-moz-transform: rotatex (60deg) rotatey (19.5deg) ؛
-MS-transform: rotatex (60deg) rotatey (19.5deg) ؛
التحويل: rotatex (60deg) rotatey (19.5deg) ؛
}
#pyramid> div: nth-child (4) {
اللون الحدودي: RGBA شفافة شفافة (50 ، 50 ، 50 ، 0.8) ؛
-webkit-transform: rotatex (-60deg) Rotatey (19.5deg) Translatex (-116px) Translatey (-200px) Translatez (326px) ؛
-moz-transform: Rotatex (-60deg) Rotatey (19.5deg) Translatex (-116px) Translatey (-200px) Translatez (326px) ؛
-MS-transform: Rotatex (-60deg) Rotatey (19.5deg) Translatex (-116px) Translatey (-200px) Translatez (326px) ؛
التحويل: Rotatex (-60deg) Rotatey (19.5deg) Translatex (-116px) Translatey (-200px) Translatez (326px) ؛
}
</style>
ابدأ الآن في شرح الكود ذي الصلة.
يشبه رمز HTML الكود السابق ، وهو أن هناك ثلاثة divs إضافية ، والتي يتم استخدامها كجوانب الثلاثة الأخرى من رباعي السطوح.
في رمز CSS ، نستخدم #pyramid> div: nth-child (n) للعثور على الوجوه الأربعة من trihedron ، وضبط ألوان الجوانب الأربعة للحدود ، وتعريفها في مثلثات على التوالي. قم بتعيين زاوية وتوجيه وموضعها في الفضاء ثلاثي الأبعاد من خلال سمة التحويل ، و rotatey ، وترجمة ، وترجمة ، وترجمة طرق. وهذا ينطوي على الكثير من المعرفة الرياضية ، ويحتاج الجميع إلى استكمال المعرفة ذات الصلة.
من خلال الترتيب أعلاه ، يتم تشكيل رباعي السطوح. التالي هو إضافة آثار الرسوم المتحركة إليها. الأشياء المستخدمة هنا هي أيضًا بسيطة للغاية ، وهي الرسوم المتحركة وإطارات المفاتيح. يمكنك تعلم الخصائص المتعلقة بـ CSS3 في الموقع ، لذلك لن أشرح الكثير هنا.
في هذه المرحلة من هذه المقالة ، يمكنك لصق رمز HTML و CSS معًا لمعرفة التأثير النهائي.
هناك شيء ما في الكود لا تفهمه ، حتى تترك لي رسالة.