كيفية إنشاء تصميمات ثلاثية الأبعاد باستخدام خاصية التحويل CSS3

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

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

ما هو المحور Z؟

سيكون هناك الكثير من الإشارات إلى المحور z. من السهل التفكير في الأمر على أنه مسافة القياس لشيء ما تجاهك أو بعيدًا عنك. إذا كانت قيمة موجبة ، فهي أقرب إليك. إذا كانت قيمة سالبة ، فهي أبعد ما تكون عنك.

أمثلة على التحويل ثلاثي الأبعاد

الخصائص الأساسية للتحويل ثلاثي الأبعاد هي translate3d و scale3d و rotateX و rotateY و rotateZ و perspective و matrix3d . يتم تضمين المزيد من الوسائط في translate3d و scale3d و matrix3d ​​لأنها تأخذ وسيطات لـ x و y و z. تأخذ خاصية المقياس قيمة للزاوية ويأخذ المنظور أيضًا قيمة واحدة.

يترجم

ترجمة Z ()

يحدد هذا الترجمة ثلاثية الأبعاد باستخدام قيمة المحور z فقط. قد تتذكر ترجمة x و y من الترجمة ثنائية الأبعاد. الفكرة هي نفسها مع translateX() و translateY() و translateZ() لأن كل منها يأخذ قيمة طول تنقل العنصر بالمسافة المحددة على طول المحور الصحيح.

في هذا المثال ، من شأن translateZ(-20px) أن تنقل العنصر بمقدار 20 بكسل بعيدًا عن العارض.

إليك مقتطف الشفرة لإنشاء هذا المثال:

 -webkit-transform: translateZ(-20px); -ms-transform: translateZ(-20px); transform: translateZ(-20px);

translate3d ()

تُستخدم وظيفة translate3d() لتحريك موضع العنصر في مساحة ثلاثية الأبعاد. يتم إنشاء هذا التحول عن طريق تحديد الإحداثيات التي تحدد مقدار تحركه في كل اتجاه.

transform: translate3d(20px, -15px, 70px); ينقل الصورة بمقدار 20 بكسل على طول المحور x الموجب ، و 15 بكسل على المحور y السالب ، ثم 70 بكسل على طول المحور z الموجب.

هذا مثال على translate3d :

 -webkit-transform: translate3d(20px, -15px, 70px); -ms-transform: translate3d(20px, -15px, 70px); transform: translate3d(20px, -15px, 70px);

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

استدارة

تقوم وظيفة rotate3d() بتدوير العنصر في مساحة ثلاثية الأبعاد بالزاوية المحددة حول المحور. يمكن كتابة هذا على هيئة rotate(x, y, z, angle) .

rotateX ()

لن تعمل قيم البكسل هنا ، يجب أن تكون بالدرجات. تقوم طريقة rotateX() بتدوير عنصر حول محوره x عند درجة معينة. انظر كيف يكون المستطيل أقصر؟ يتم تدويره على طول المحور السيني. يوضح هذا المثال الدوران عند 55 درجة.

 -ms-transform: rotateX(55deg); /* IE 9 */ -webkit-transform: rotateX(55deg); /* Safari */ transform: rotateX(55deg);

استدارة ص ()

تقوم طريقة rotateY() بتدوير عنصر حول محوره y. لاحظ كيف أن المستطيل السفلي ليس بعرض القمة؟ إنه مستدير بحيث لا يبدو بعرض المستطيل أعلاه لأنه يدور بمقدار 60 درجة.

 -ms-transform: rotateY(60deg); /* IE 9 */ -webkit-transform: rotateY(60deg); /* Safari */ transform: rotateY(60deg);

rotateZ ()

تقوم طريقة rotateZ() بتدوير عنصر حول محوره z بدرجة معينة. في هذه الحالة ، تكون القيمة 120 درجة.

 -ms-transform: rotateZ(120deg); /* IE 9 */ -webkit-transform: rotateZ(120deg); /* Safari */ transform: rotateZ(120deg);

rotate3d ()

تقوم الوظيفة rotate3d(1, -1, 1, 45deg) بتدوير الصورة على طول المحور الصادي بزاوية 45 درجة. من المهم ملاحظة أنه يمكنك استخدام القيم السالبة لتدوير العنصر في الاتجاه المعاكس.

نظرًا لأن هذا أكثر تعقيدًا من مواصفات المحور الفردي ، يمكن تقسيم rotate3d على النحو التالي: rotate3d(x,y,z,angle) حيث x = 1 ، y = -1 ، z = 1 ، وزاوية الدوران = 45 درجة .

يبدو الكود المستخدم لهذا النمط كما يلي:

 -ms-transform: rotate3d(1, -1, 1, 45deg); /* IE 9 */ -webkit-transform: rotate3d(1, -1, 1, 45deg); /* Safari */ transform: rotate3d(1, -1, 1, 45deg);

اختبار الأساسيات

في اتجاه عقارب الساعة على طول المحور السيني بمقدار 45 درجة.

 transform: rotate3d(1, 0, 0, 45deg);

في اتجاه عقارب الساعة على طول المحور الصادي بمقدار 45 درجة.

 transform: rotate3d(0, 1, 0, 45deg);

في اتجاه عقارب الساعة على طول المحور z بمقدار 45 درجة.

 transform: rotate3d(0, 0, 1, 45deg);

من الجدير بالذكر أنه بناءً على القيم المحددة ، لن يكون التناوب ملحوظًا في بعض الأحيان ؛ على سبيل المثال ، لن يكون هذا ملحوظًا: transform: rotate3d(0, 0, 0, 50deg);

وجهة نظر

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

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

ستبدو خاصية transform بالشكل التالي: transform: perspective(600px); وستبدو خاصية المنظور بالشكل التالي: perspective: 600px; .

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

تحدد قيمة perspective مدى شدة التأثير ثلاثي الأبعاد. فكر في القيمة المنخفضة على أنها ملحوظة حقًا ، مثل ما تشعر به عندما تنظر إلى كائن كبير. عندما يكون هناك قيمة أكبر ، يكون التأثير أقل حدة.

يمكن تخصيص موضع نقطة التلاشي أيضًا. إنه جدير بالذكر ، والكثير من التجارب ، لأنه وثيق الصلة بمنظور CSS. بشكل افتراضي ، يتم وضع نقطة التلاشي لمساحة ثلاثية الأبعاد في المركز. استخدم خاصية أصل المنظور لتغيير موضع نقطة التلاشي. سيبدو كالتالي: perspective-origin: 15% 55% .

حجم

مقياس Z ()

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

لفهم المقياس (Z) تمامًا ، تلاعب بالقيمة وسترى المنظور يصبح "أكثر وضوحًا" مع القيم الأكبر.

مقياس 3d (س ، ص ، ض)

تعمل الدالة scale3d() على تغيير حجم العنصر وتتم كتابتها scale(x, y, z) . مثل scaleZ ، ليس من الواضح كيف يبدو المنظور بالكامل ما لم يتم استخدامه مع perspective .

يستخدم هذا المثال هذا:

 -ms-transform: perspective(500px) scale3d(0.8, 2, 0.2); /* IE 9 */ -webkit-transform: perspective(500px) scale3d(0.8, 2, 0.2); /* Safari */ transform: perspective(500px) scale3d(0.8, 2, 0.2);

ملاحظة سريعة: إذا كانت جميع الإحداثيات الثلاثة للمتجه متساوية ، فإن القياس يكون موحدًا ولن يكون هناك فرق ملحوظ.

 transform: scale3d(1, 1, 1); /* unchanged */ transform: scale3d(2, 2, 2); /* twice the original size */

ماتريكس 3 دي ()

يمكن أن تأخذ المصفوفة ثنائية الأبعاد ست قيم ، بينما تأخذ المصفوفة ثلاثية الأبعاد 16 (مصفوفة 4 × 4)! سيكون منشورًا طويلاً جدًا إذا تمت تغطية جميع التفاصيل ، لذلك إذا كنت ترغب في استكشاف هذا المفهوم أكثر ، فإنني أوصي بشدة بهذه التجربة التفاعلية matrix3d ​​على Codepen.

هذا matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)

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

الآن بعد أن تمت تغطية الأساسيات ، فإن إنشاء رسوم متحركة تفاعلية هو الخطوة التالية. باستخدام عمليات التحويل والانتقالات في CSS3 ، تتغير العناصر من حالة إلى أخرى بالتناوب أو التحجيم أو إضافة منظور.

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

كيفية إنشاء قلب البطاقة

من منا لا يحب لعب الورق؟ يحتوي هذا المثال على بطاقة ذات وجهين ويمكنك رؤية كلا الجانبين عن طريق قلبها مع التحويل. إذا ألقيت نظرة على علامة body ، فإن الكثير من التأثير يأتي من خاصية perspective . تم ضبطه ليكون 500 بكسل. تبدو القيمة الأقل مثل 100 بكسل "منحرفة" جدًا.

هنا هو البداية HTML:

 <div class="wrapper"> div class="side-one"></div> <div class="side-two"></div> </div>

CSS هو ما يجعل ذلك يحدث:

 body { -webkit-perspective: 500px; perspective: 500px; } .wrapper { -webkit-transition: all 1s ease-in; transition: all 1s ease-in; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; margin: 100px auto; width: 250px; height: 250px; cursor: pointer; } .wrapper div { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; width: 100%; height: 100%; border-radius: 10px; background-position: 50% 50%; background-size: 150px; background-repeat: no-repeat; box-shadow: inset 0 0 45px rgba(255,255,255,.3), 0 12px 20px -10px rgba(0,0,0,.4); color: #FFF; text-align: center; text-shadow: 0 1px rgba(0,0,0,.3); } .side-one { z-index: 400; background: #50c6db url(image.png); } .side-two { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); background: #ef4e65 url(image.png); } .wrapper:hover { -webkit-transform: rotateY(-1turn); transform: rotateY(-1turn); }

يمكن العثور على هذا في Codepen.

إذا كنت جديدًا على التحولات ، فقد يبدو هذا مثيرًا للاهتمام بالنسبة لك: transform: rotate(1turn); هذه الوحدة مثالية لبطاقتنا لأن وحدة "الدوران" هي بالضبط ما تبدو عليه ، وهي عبارة عن دائرة كاملة واحدة.

لقد استخدمت أيضًا بعض التخفيف لإنشاء طريقة مخصصة للغزل. يتم تحقيق ذلك من خلال transition: all 1s ease-in; .

خاصية أخرى ثلاثية الأبعاد في المقتطف هي transform-style: preserve-3d; . من خلال تضمين هذا ، فإنه يسمح للعنصر "بالتأرجح" في الفضاء ثلاثي الأبعاد بدلاً من البقاء مع العنصر الأصل.

كيفية إنشاء نص بتأثير ثلاثي الأبعاد

هذا المثال مستوحى من ملصق فيلم قديم. هناك العديد من المحارف المختلفة التي يمكن أن تستخدم تصميم CSS رائعًا ، لذا فإن تأثيرات الكتابة الفريدة ممكنة بالتأكيد. يستخدم هذا النص rotate3d و transform3d لمنحه تحويلًا فريدًا.

لغة HTML بسيطة جدًا:

 <div class="container"> <div class="text-wrapper"> <div class="text">New York City</div> </div> </div>

هنا CSS الأساسية:

 .container{ -webkit-perspective: 600; } .text { transform: rotate3d(2, 2, .5, 22deg)translate3d(100px, 0px, 0px); }

يمكن العثور على CSS ومثال أكثر تفصيلاً على Codepen.

نأمل أن تجلب تحويلات CSS ثلاثية الأبعاد بُعدًا جديدًا لتصميماتك. يعد استخدام المنظور طريقة رائعة لجعل العناصر تبدو أكثر بعدًا. بالاقتران مع الانتقالات ، هناك العديد من الاحتمالات عند إنشاء الرسوم المتحركة.