تعلمك التكنولوجيا CSS3 ثلاثية الأبعاد كيفية اللعب

3D بداية CSS3

لتشغيل 3D من CSS3 ، يجب أن تفهم العديد من المفردات ، وهي المنظور والدوران والترجمة. المنظور يعني النظر في الأشياء ثنائية الأبعاد على الشاشة من منظور واقعي ، وبالتالي إظهار تأثير ثلاثي الأبعاد. لم يعد الدوران دوران على المستوى ثنائي الأبعاد ، بل هو دوران لنظام إحداثيات ثلاثية الأبعاد ، بما في ذلك المحور السيني ، المحور ص ، ودور المحور z. الشيء نفسه ينطبق على الترجمة.

بالطبع ، باستخدام النظرية لتوضيح ، ربما لا تفهم. هنا 3 صور:

تدوير على طول المحور السيني

تدوير على طول المحور y

تدوير على طول محور Z

لا ينبغي أن تكون هناك مشكلة في الدوران ، لذلك من الأسهل فهم الترجمة ، أي التحرك على المحور السيني والمحور ص ومحور z.

قد تقول أن المنظور يصعب فهمه. اسمحوا لي أن أقدم عدة سمات للمنظور.

وجهة نظر

الاسم الإنجليزي للمنظور هو المنظور. بدون هذا الشيء ، لا توجد طريقة لتشكيل تأثير ثلاثي الأبعاد. ولكن كيف يسمح هذا الشيء متصفحنا بتكوين تأثير ثلاثي الأبعاد؟ يمكنك إلقاء نظرة على الصورة أدناه. في الواقع ، يجب أن يعرف أولئك الذين تعلموا الرسم علاقة المنظور ، وهذا هو السبب.

ولكن في CSS لها قيم رقمية ، على سبيل المثال ، ما الذي يمثله 1000 بكسل؟ يمكننا أن نفهم بهذه الطريقة أنه إذا نظرنا مباشرة إلى الكائن ، فسيكون الكائن ساحقًا ويشغل بصرنا. المسافة لدينا أصبحت أكبر وأصغر ، وسيظهر المعنى ثلاثي الأبعاد. في الواقع ، تقوم هذه القيمة ببناء المسافة بين أعيننا والشاشة ، والتي تبني أيضًا وهمًا ثلاثي الأبعاد افتراضي.

المنظور الأولي

مما سبق نفهم المنظور ، ونضيف ماهية هذا الأصل. الشخص الذي ذكرناه سابقًا هو المسافة من الكائن ، وهذا هو خط البصر للعينين. تحدد المواضع المختلفة لوجهة نظرنا المشاهد المختلفة التي نراها. الافتراضي هو المركز ، وهو المنظور الأولي: 50 ٪ 50 ٪. القيمة الأولى هي المحور السيني الذي يعتمد عليه العنصر ثلاثي الأبعاد ، ويتم تعريف الموضع الثاني على المحور ص.

عند تحديد سمة منظور الأصل لعنصر ما ، تحصل عناصره على تأثيرات المنظور ، وليس العنصر نفسه. يجب استخدامها مع سمة المنظور ويؤثر فقط على عناصر التحويل ثلاثية الأبعاد. (W3School)

أسلوب التحويل

المنظور هنا مرة أخرى. نعم ، هذا هو مفتاح 3D في CSS. أسلوب التحويل مسطح بشكل افتراضي. إذا كنت ترغب في رؤية التأثير ثلاثي الأبعاد على العناصر ، فيجب عليك استخدام أسلوب التحويل: Preserve-3D ، وإلا فهو مجرد تحويل طائرة ، وليس تحولًا ثلاثي الأبعاد.

تأخذك للعب مع CSS3-3D خطوة بخطوة

لدينا القليل من الفهم للمفهوم أعلاه ، لذلك دعونا نبدأ القتال الفعلي أدناه!

دعونا نلقي نظرة على التأثير ، أليس رائعًا: قم بزيارة https://bupt-hjm.github.io/css3-3d/ ، إذا كنت تعتقد أنه على ما يرام ، تذكر أن تعطيه ل Star HH

الخطوة 1: هيكل HTML

يتم لف حاوية بسيطة للغاية مع صندوق قطعة تحتوي على 6 قطع

 <viv> <viv> <viv> </viv> <viv> </viv> <viv> </viv> <viv> </viv> <viv> </viv> <viv> </viv> <viv> </viv> <viv> </viv> <viv> </viv> </viv> </div>

الخطوة 2: إضافة سمات ثلاثية الأبعاد ضرورية لدخول العالم ثلاثي الأبعاد

من خلال التفسير أعلاه ، يجب أن تكون أكثر دراية بالمنظور.

 /*Container*/.container {-webkit -perspective: 1000px ؛ -Moz-perspective: 1000px ؛ -MS-perspective: 1000px ؛ المنظور: 1000px ؛}/*مربع قطعة*/ .piece-box {المنظور الأولي: 50 ٪ 50 ٪ ؛ -webkit-transform-style: Preserve-3D ؛ -الموز النموذجية: الحفاظ على 3D ؛ -MS-MOR-TRANDSTORM: PROSERVE-3D ؛ أسلوب التحويل: الحفاظ على 3D ؛}

الخطوة 3: إضافة الأنماط اللازمة

 /*Container*/.container {-webkit -perspective: 1000px ؛ -Moz-perspective: 1000px ؛ -MS-perspective: 1000px ؛ المنظور: 1000px ؛}/*piece box*/. piece-box {الموضع: النسبية ؛ العرض: 200 بكسل ؛ الارتفاع: 200 بكسل ؛ الهامش: 300px Auto ؛ المنظور الأولي: 50 ٪ 50 ٪ ؛ -webkit-transform-style: Preserve-3D ؛ -الموز النموذجية: الحفاظ على 3D ؛ -MS-MOR-TRANDSTORM: PROSERVE-3D ؛ أسلوب التحويل: Preserve-3d ؛}/*قطعة نمط عام*/. قطعة {الموضع: absolute ؛ العرض: 200 بكسل ؛ الارتفاع: 200 بكسل ؛ الخلفية: أحمر. Opightity: 0.5 ؛}. Piece-1 {background: #ff6666 ؛}. Piece-2 {background: #fff00 ؛}. piece-3 {background: #006699 ؛}. piece-4 {packed: #009999 ؛}.

بالطبع ، بعد إكمال هذه الخطوة ، ما زلت ترى مربعًا فقط ، وهو قطعةنا 6 ، لأن تحويلنا ثلاثي الأبعاد لم يبدأ بعد

الخطوة 4: هجوم التحول ثلاثي الأبعاد

أول شيء هو إدراك الفانوس الدوار. لا ينبغي لنا أن ندعها تذهب أولاً ، ندرك الجزء الخفيف.

كيف تحقق ذلك؟ نظرًا لتكوين دائرة ، فإن الدائرة هي 360 درجة ولدينا 6 قطع ، إذن ، من السهل التفكير في أننا نحتاج إلى تدوير كل قطعة بزيادة 60 درجة ، ويصبح على النحو التالي

كيف تسحبهم من المركز؟

هنا يجب أن نلاحظ أيضًا أنه بعد تدوير العنصر المحيط بمحور Y ، سيدور محور X و Z فعليًا ، وبالتالي فإن الخط العمودي لكل وجه من المكعب لا يزال هو المحور z. نحتاج فقط إلى تغيير قيمة الترجمة. عندما تكون Translatez إيجابية ، نسير في اتجاهنا ، حتى نتمكن من تفكيكها.

ولكن كيف تقيس المسافة؟

هل هو واضح في لمحة؟

دعنا نعدل CSS

 .piece-1 {background: #ff6666 ؛ -webkit-transform: rotatey (0deg) translatez (173.2px) ؛ -MS-transform: rotatey (0deg) translatez (173.2px) ؛ -O التحول: rotatey (0deg) Translatez (173.2px) ؛ تحويل: ROTATEY (0deg) Translatez (173.2px) ؛}. Piece-2 {background: #fff00 ؛ -webkit-transform: rotatey (60deg) translatez (173.2px) ؛ -MS-transform: Rotatey (60deg) Translatez (173.2px) ؛ -O التحول: ROTATEY (60DEG) Translatez (173.2px) ؛ TRANVERM: ROTATEY (60DEG) TRANSLATEZ (173.2px) ؛}. Piece-3 {background: #006699 ؛ -webkit-transform: rotatey (120deg) Translatez (173.2px) ؛ -MS-transform: Rotatey (120deg) Translatez (173.2px) ؛ -O التحول: ROTATEY (120DEG) Translatez (173.2px) ؛ -O التحول: ROTATEY (120DEG) Translatez (173.2px) ؛ تحويل: ROTATEY (120DEG) TRANSLATEZ (173.2px) ؛}. Piece-4 {background: #009999 ؛ -webkit-transform: rotatey (180deg) translatez (173.2px) ؛ -MS-transform: Rotatey (180deg) Translatez (173.2px) ؛ -O التحول: ROTATEY (180DEG) Translatez (173.2px) ؛ TRANVERM: ROTATEY (180DEG) TRANSLATEZ (173.2px) ؛}. Piece-5 {background: #ff0033 ؛ -webkit-transform: rotatey (240deg) translatez (173.2px) ؛ -Ms-transform: Rotatey (240deg) Translatez (173.2px) ؛ -O التحول: ROTATEY (240DEG) Translatez (173.2px) ؛ تحويل: ROTATEY (240DEG) TRANSLATEZ (173.2px) ؛}. Piece-6 {background: #ff6600 ؛ -webkit-transform: Rotatey (300deg) Translatez (173.2px) ؛ -Ms-transform: Rotatey (300deg) Translatez (173.2px) ؛ -O التحول: ROTATEY (300DEG) Translatez (173.2px) ؛ التحويل: Rotatey (300deg) Translatez (173.2px) ؛}

هل تم تحقيق الفانوس الدوار؟

الخطوة 5: الرسوم المتحركة تجعل الحركة ثلاثية الأبعاد

لتحقيق الفانوس المتحرك ، يكون الأمر بسيطًا جدًا. نحتاج فقط إلى إضافة الرسوم المتحركة للتناوب إلى صندوق القطعة. أكمل الرسوم المتحركة في 5 ثوانٍ ، وتدوير من 0 درجة إلى 360 درجة

 /*piece box*/. piece-box {position: recatial ؛ العرض: 200 بكسل ؛ الارتفاع: 200 بكسل ؛ الهامش: 300px Auto ؛ المنظور الأولي: 50 ٪ 50 ٪ ؛ -webkit-transform-style: Preserve-3D ؛ -الموز النموذجية: الحفاظ على 3D ؛ -MS-MOR-TRANDSTORM: PROSERVE-3D ؛ أسلوب التحويل: Preserve-3D ؛ الرسوم المتحركة: Picerotate 5S ؛ -Moz-animation: picerotate 5s ؛ / * firefox */ -webkit -animation: picerotate 5s ؛ / * Safari و Chrome */ -o -animation: picerotate 5s ؛ /*opera*/}/*resolving LAMP Animation*/@keyframes picerotate {0 ٪ {-webkit-transform: rotatey (0deg) ؛ -Ms-transform: rotatey (0deg) ؛ -O التحول: rotatey (0deg) ؛ تحويل: rotatey (0deg) ؛} 100 ٪ {-webkit-transform: rotatey (360deg) ؛ -MS-transform: rotatey (360deg) ؛ -O التحول: ROTATEY (360DEG) ؛ تحويل: rotatey (360deg) ؛}}/ * firefox */@-moz-keyframes picerotate {0 ٪ {-webkit-transform: rotatey (0deg) ؛ -Ms-transform: rotatey (0deg) ؛ -O التحول: rotatey (0deg) ؛ تحويل: rotatey (0deg) ؛} 100 ٪ {-webkit-transform: rotatey (360deg) ؛ -MS-transform: rotatey (360deg) ؛ -O التحول: ROTATEY (360DEG) ؛ تحويل: ROTATEY (360DEG) ؛}}/ * SAFARI و Chrome */@-WebKit-Keyframes picerotate {0 ٪ {-webkit-transform: rotatey (0deg) ؛ -Ms-transform: rotatey (0deg) ؛ -O التحول: rotatey (0deg) ؛ تحويل: rotatey (0deg) ؛} 100 ٪ {-webkit-transform: rotatey (360deg) ؛ -MS-transform: rotatey (360deg) ؛ -O التحول: ROTATEY (360DEG) ؛ تحويل: rotatey (360deg) ؛}}/ * opera */@-o-keyframes picerotate {0 ٪ {-webkit-transform: rotatey (0deg) ؛ -Ms-transform: rotatey (0deg) ؛ -O التحول: rotatey (0deg) ؛ تحويل: rotatey (0deg) ؛} 100 ٪ {-webkit-transform: rotatey (360deg) ؛ -MS-transform: rotatey (360deg) ؛ -O التحول: ROTATEY (360DEG) ؛ التحويل: rotatey (360deg) ؛}}

لن أضع صور GIF هنا ~ هل يحقق HHH آثارًا باردة؟ لم ينته بعد ~ مجموعة مكعب بارد أكثر

في الواقع ليس من الصعب تنفيذ مكعب. لن أخوض في التفاصيل هنا. يمكنك أولاً تخيل وجه ثم توسيع وجوه أخرى لتنفيذها. على سبيل المثال ، وضعنا الترجمة الأمامية (100px) من المكعب بالقرب من 100 بكسل ، ثم ترجمة (-100 بكسل) ثم نقلها بعيدًا عن 100 بكسل. على اليسار هناك Translatex (-100px ، ثم التدوير (90deg) ، على اليمين هو Translatex (100px) ثم rotatey (90deg) ، في الأعلى هو ترجمة (-100px) ، و rotatex (90deg) ، في أسفل الترجمة (100px) ، dotatex ( (90deg).

CSS كما يلي. ما يلي هو فقط قطعة 1. يمكن للقراء الآخرين تنفيذها بمفردهم ، أو النظر إلى رمز مصدر جيثب الخاص بي

 .piece-1 {background: #ff6666 ؛ -webkit-transform: rotatey (0deg) translatez (173.2px) ؛ -MS-transform: rotatey (0deg) translatez (173.2px) ؛ -O التحول: rotatey (0deg) Translatez (173.2px) ؛ التحويل: rotatey (0deg) Translatez (173.2px) ؛ الرسوم المتحركة: Piece1Rotate 5S 5S ؛ -Moz-animation: Piece1Rotate 5S 5S ؛ / * firefox */ -webkit -animation: piece1Rotate 5S 5S ؛ / * Safari و Chrome */ -o -animation: Piece1Rotate 5S 5S ؛ / * Opera */ -webkit-animation-fill-mode: forwards ؛ / * Chrome ، Safari ، Opera */ Animation-Fill-Mode: Forwards ؛ }/*Front*/ @keyframes piece1rotate {0 ٪ {-webkit-transform: rotatey (0deg) translatez (173.2px) ؛ -MS-transform: rotatey (0deg) translatez (173.2px) ؛ -O التحول: rotatey (0deg) Translatez (173.2px) ؛ التحويل: rotatey (0deg) Translatez (173.2px) ؛} 100 ٪ {-webkit-transform: rotatey (0deg) translatez (100px) ؛ -Ms-transform: rotatey (0deg) translatez (100px) ؛ -O التحول: rotatey (0deg) Translatez (100px) ؛ التحويل: rotatey (0deg) translatez (100px) ؛}} / * firefox * / @-moz-keyframes piece1rotate {0 ٪ {-webkit-transform: rotatey (0deg) translatez (100px) ؛ rotatey (0deg) Translatez (173.2px) ؛ -MS-transform: rotatey (0deg) translatez (173.2px) ؛ -O التحول: rotatey (0deg) Translatez (173.2px) ؛ التحويل: rotatey (0deg) Translatez (173.2px) ؛} 100 ٪ {-webkit-transform: rotatey (0deg) translatez (100px) ؛ -Ms-transform: rotatey (0deg) translatez (100px) ؛ -O التحول: rotatey (0deg) Translatez (100px) ؛ -O التحول: rotatey (0deg) Translatez (100px) ؛ التحويل: Rotatey (0deg) Translatez (100px) ؛ التحويل: Rotatey (0deg) Translatez (100px) ؛ Translatez (100px) ؛}} / * Safari و Chrome * / @-WebKit-keyframes piece1rotate {0 ٪ {-webkit-transform: rotatey (0deg) translatez (173.2px) ؛ -MS-transform: rotatey (0deg) translatez (173.2px) ؛ -O التحول: rotatey (0deg) Translatez (173.2px) ؛ التحويل: rotatey (0deg) Translatez (173.2px) ؛} 100 ٪ {-webkit-transform: rotatey (0deg) translatez (100px) ؛ -Ms-transform: rotatey (0deg) translatez (100px) ؛ -O التحول: rotatey (0deg) Translatez (100px) ؛ التحويل: rotatey (0deg) translatez (100px) ؛}} / * opera * / @-o-keyframes piece1rotate {0 ٪ {-webkit-transform: rotatey (0deg) translatez (173.2px) ؛ -MS-transform: rotatey (0deg) translatez (173.2px) ؛ -O التحول: rotatey (0deg) Translatez (173.2px) ؛ -O التحول: rotatey (0deg) Translatez (173.2px) ؛ التحويل: rotatey (0deg) Translatez (173.2px) ؛} 100 ٪ {-webkit-transform: rotatey (0deg) translatez (100px) ؛ -Ms-transform: rotatey (0deg) translatez (100px) ؛ -O التحول: rotatey (0deg) Translatez (100px) ؛ -O التحول: rotatey (0deg) Translatez (100px) ؛ التحويل: rotatey (0deg) translatez (100px) ؛}}

يمكن أن يجد القراء الدقيقون أنني استخدمت وضعًا محفوظًا للرسوم المتحركة: إلى الأمام ، وهو في الواقع للحفاظ على هذه القطع في تأثير الرسوم المتحركة النهائية ، أي تأثير المكعب. يمكن للقراء تجربته دون تجربته ، وسيظل مستعاده إلى حالته الأصلية.

وأخيرا ، يدور المكعب. حاويةنا في المقدمة استخدمت بالفعل الرسوم المتحركة. قد يعتقد القراء أنه يمكنني إضافة فصل دراسي ووضع Animaiton. سوف تغطي HHH ، Animaiton الجبهة ، وسوف تختفي الرسوم المتحركة في الفانوس الأمامي. لذلك في بنية HTML ، أضفت قطعة تغليف مربع أخرى ، على النحو التالي

 <viv> <viv> <viv> <!-حاوية جديدة-> <div> </viv> <viv> </viv> <viv> </viv> <viv> </viv> <viv> </viv> <viv> </viv> <viv> </viv> <viv> </viv> <viv> </div>

في الرسوم المتحركة ، يمكننا التحكم في وقت تأخير الرسوم المتحركة للمكعب ، أي الانتظار حتى يتم الانتهاء من مجموعة المكعب قبل بدء الرسوم المتحركة

الرسوم المتحركة: Boxrotate 5S 10S Infinite ؛ أول 5s هي مدة الرسوم المتحركة ، والثانية عشر هي وقت التأخير ، ثم ندع المكعب يدور ، من 0 درجة إلى 360 درجة حول المحور X ، وأيضًا من 0 إلى 360 درجة حول المحور Y.

 .piece-box2 {-webkit-transform-style: Preserve-3D ؛ -الموز النموذجية: الحفاظ على 3D ؛ -MS-MOR-TRANDSTORM: PROSERVE-3D ؛ أسلوب التحويل: Preserve-3D ؛ الرسوم المتحركة: Boxrotate 5S 10S Infinite ؛ -Moz-Animation: Boxrotate 5S 10S Infinite ؛ / * firefox */ -webkit -enimation: Boxrotate 5S 10S Infinite ؛ / * Safari و Chrome */ -o -animation: Boxrotate 5S 10S Infinite ؛ /*Opera*/}/*Cuboid Rotation Animation*/@keyframes boxrotate {0 ٪ {-webkit-transform: rotatex (0deg) rotatey (0deg) ؛) ؛ -Ms-transform: rotatex (0deg) rotatey (0deg) ؛) ؛ -O التحول: rotatex (0deg) rotatey (0deg) ؛) ؛) ؛) ؛ التحويل: rotatex (0deg) rotatey (0deg) ؛) ؛) ؛} 100 ٪ {-webkit-transform: rotatex (360deg) rotatey (360deg) ؛ -MS-transform: rotatex (360deg) rotatey (360deg) ؛ -O التحول: ROTATEX (360DEG) ROTATEY (360DEG) ؛ تحويل: ROTATEX (360DEG) ROTATEY (360DEG) ؛}}/ * FIREFOX */@-MOZ-KEYFRAMES Boxrotate {0 ٪ {-webkit-transform: rotatex (0deg) rotatey (0deg) ؛) ؛) ؛ -Ms-transform: rotatex (0deg) rotatey (0deg) ؛) ؛ -O التحول: rotatex (0deg) rotatey (0deg) ؛) ؛) ؛) ؛ التحويل: rotatex (0deg) rotatey (0deg) ؛) ؛) ؛} 100 ٪ {-webkit-transform: rotatex (360deg) rotatey (360deg) ؛ -MS-transform: rotatex (360deg) rotatey (360deg) ؛ -O التحول: ROTATEX (360DEG) ROTATEY (360DEG) ؛ التحويل: rotatex (360deg) rotatey (360deg) ؛}}/ * Safari و Chrome */@-WebKit-Keyframes boxrotate {0 ٪ {-webkit-transform: rotatex (0deg) rotatey (0deg) ؛) ؛ -Ms-transform: rotatex (0deg) rotatey (0deg) ؛) ؛ -O التحول: rotatex (0deg) rotatey (0deg) ؛) ؛ rotatex (0deg) rotatey (0deg) ؛) ؛ التحويل: rotatex (0deg) rotatey (0deg) ؛) ؛} 100 ٪ {-webkit-transform: rotatex (360deg) rotatey (360deg) ؛ -MS-transform: rotatex (360deg) rotatey (360deg) ؛ -O التحول: ROTATEX (360DEG) ROTATEY (360DEG) ؛ التحويل: rotatex (360deg) rotatey (360deg) ؛}}/ * opera */@-o-keyframes boxrotate {0 ٪ {-webkit-transform: rotatex (0deg) rotatey (0deg) ؛) ؛ -Ms-transform: rotatex (0deg) rotatey (0deg) ؛) ؛ -O التحول: rotatex (0deg) rotatey (0deg) ؛) ؛ التحويل: rotatex (0deg) rotatey (0deg) ؛) ؛) ؛} 100 ٪ {-webkit-transform: rotatex (360deg) rotatey (360deg) ؛ -MS-transform: rotatex (360deg) rotatey (360deg) ؛ -O التحول: ROTATEX (360DEG) ROTATEY (360DEG) ؛ التحويل: rotatex (360deg) rotatey (360deg) ؛}}

التأثير النهائي اكتمل!

ما ورد أعلاه أمثلة على تنفيذ CSS 3D. يمكن للطلاب المحتاجين الرجوع إليه. شكرا لك على دعمك لهذا الموقع!