مرحبًا بكم جميعًا. سنتحدث اليوم
بإيجاز عن التحولات. تشبه التحولات إلى حد كبير
الانتقالات، حيث أنها توفر خيارًا اّخرًا لتغيير مظهر
العناصر الموجودة على صفحتنا لذا فيمكننا تغيير أشياءًا
بطريقة ثنائية الأبعاد وكذلك بطريقة ثلاثية الأبعاد حيث
ينظر الناس إلى موقعك. لذا فلنلق نظرة على بعض خيارات
التحويل ثنائي الأبعاد. سنتحدث عن الترجمة و
التدوير والقياس والانحراف والمصفوفة وعن كيفية عمل
كل منهم في CSS3. إن الخيار الأول الذي
سأعرضه لكم هو الترجمة. ما ستفعله الترجمة هو أنه يمكنك
إعطائها قيمتين، وأطلقت عليهما X و y وبناءً على هاتين القيمتين، يمكنك تحريك العنصر إلى اليسار أو
اليمين أو إلى الأعلى أو إلى أسفل. إذا كانت X موجبة، ستتحرك إلى اليمين،
وإن كانت سالبة ستتحرك إلى اليسار. وبالنسبة ل y، إذا كانت موجبة ستتحرك إلى أسفل
وإذا كانت سالبة ستتحرك لأعلى. لذا فلنلقي نظرة على مثالاً
فعليًا لجعل الأمر أكثر وضوحًا. هنا، لدى هذا العنصر الأزرق الجميل. وما أنا على وشك أن أقوله هو أنني أريد
ترجمته، 100 و 75. لذا ستتوقع رؤيته يتحرك
لليمين وإلى الأسفل قليلاً. لذا يمكنكم أن تلاحظوا مرة أخرى أنه من الصعب إخباركم حقًا
متى تتحرك العناصر لأعلى ومتى تتحرك لأسفل. ولكن إذا نظرتم إلى الهوامش، سوف تجدوا أننا
قمنا بزيادتها تقريبًا بشكل فعال. الخيار التالي هو التدوير. عندما تقوم بتدوير شيء ما،
فإنك بلفه أو وأود أن أجزم بأن
العنصر يدور عدد معين من الدرجات. أت لا ترى هذا الدوران. إنك ترى فقط النتيجة أو
ماذا يبدو في النهاية. لدى هنا عنصر اّخر و
سأطلب منك أن تقوم بتدويره 30 درجة. لذا, من هنا إلى هنا. والاّن من المهم جدًا
أن تتذكر تلك الدرجة إذا قمت للتو بالضبط حتى30 درجة، فلن
تعمل العديد من المتصفحات. ففي واقع الأمر، لن تعمل العديد منها. لذا تأكد من ضبطها للدرجة التي تريد
أن تدورها،حتى رقم 30 نوعًا ما، 90 و 90 ثم استخدم بعد ذلك درجة. فلنتحدث بعد ذلك عن القياس. إن القياس مجرد طريقة جزافية
لجعل عنصر ما أوسع أو أطول. لذا ستعطيه مرة أخرى رقمين و هذا هو المقدار الذي تريد تغيير
عرض وارتفاع عنصر ما به. لذا فلدى هنا كتلة أصغر و لقد قررت أن أجعله ضعف
العرض وثلاث أضعاف الارتفاع. ها هو عنصر جديد بعد
قياس عملية تحوله. يصعب كثيرًا علىً شرح
ماهية الانحراف، وحتى أنه أكثر صعوبة القيام بذلك لأنني عادة ما أنسي يسارى
ويميني عندما أنظر إلى الكاميرا. لذا ستريد مرة أخرى أن تقوم
بلعب تلك اللعبة و والنظر إلى بعض الأمثلة. ما ستفعله هو تدوير العنصر
لعدد معين من الدرجات حول حول زاوية X وعدد معين
من الدرجات حول زاوية Y. سأريكم هنا انحرافًا
30 درجة بمقدار 15 درجة. تبدأ من هنا وينتهى بك المطاف عندما تتحول
نوعًا ما إلى زاوية انحراف غريبة جدًا. ومرة أخرى أود أن أشير إلى أنه من الصعب جدًا أن أريكم هذا
بينما أنا أنظر إلى الشاشة، لذا أتمنى ان تقوموا بكتابة ذلك
,وتتعاملون مع بعض الشئ. الخيار التالي والأخير هو المصفوفة. وعندما ترى المصفوفة، يمكنك دمج كافة عمليات التحول ثنائي الأبعاد
د معًا مرة واحدة. إنني لا أستخدم تلك الطريقة أبدًا لأنني أجد
أنه أمر محير للغاية أن أتذكر أى مقياس هذا،
أى عصر يدور، أى عنصر ينحرف. لذلك، ما لم تكن متأكدًا حقًا من
CSS3 الخاص بك، أفضل ألا تستخدم المصفوفة و امضِ قدمًا مستخدمًا التحولات الفردية
الأخرى كل منها على حدة. لذا فالتحولات الأخرى التي تحدثنا
عنها للتو كانت تحولات ثنائية الأبعاد. كما يمكننا أيضًا القيام بتحولات
لاثيه الأبعاد و إنها تشبه لحد كبير
تلك التي تحدثنا عنها للتو. لذا فعلى سبيل المثال في عملية التدوير، الاّن
بدلاً من الدوران فقط على محور X أو Y، يمكنك أيضًا التدوير
حول محور بعد z. لذا فإن أردت استخدام عملية تدوير ثلاثي الأبعاد،
فإن خياراتك الاّن هى التحويل: تدوير حول محور y كم درجة، تدوير حول محور X، وتدوير حول محور بعد Z، أو أنه يمكنك في واقع الأمر التدوير ثلاثي الأبعاد وإعطاءها
أرقام لكل بعد. نادرًا ما أستخدم الأبعاد الثلاثية. ولكننا لدينا الخيارات. لدينا التدوير، لدينا القياس،
ولدينا الترجمة. وهذه الاختيارات يكون لها تأثيرات حقًا
مثيرة للاهتمام فيما يتعلق بكيفية رغبتك في أن تظهر عناصرك. عندما يحين الوقت ونستخدم التحويلات،
هناك بعض الأشياء التي يجب التفكير فيها. عندما نستخدم التحولات عادة فإننا
نستخدمها تغييرات الحالة. إن كنت تتذكر، يعني هذا أنه ربما
قد تحدث عملية تحول عندما تقوم بالوقوف أو التركيز على عنصر ما أو عنصر نشط. إذا كنت تريد حقًا فقط تغيير
شكل عنصر ما منذ البداية وتتركه على هذا النحو، قد
ترعب فى التفكير فقط في التقاط صور والعبث بتلك الصور والقيام
بأشياء أخرى وأنت في وضع عدم الاتصال. سيكون أسرع ولا
يستهلك الكثير من عرض النطاق. ومع ذلك، فهذه طريقة جيدة
للتعامل مع الأشياء و واكتساب ثقة في التعامل مع CSS الخاص بك. بالطبع، بعد أن تعلمنا
العديد من الأشياء في هذا الفصل، من المهم أن تتذكر أنك ستحتاج غالبًا إلى بادئات المتصفح
حتى يمكن للتحولات أن تعمل. لذا فهناك اّداة أخرى في حزام الأدوات الخاص بك تستخدم من أجل تعليمك كيفية القيام بعمل شيء
جذاب لصفحتك. أعلم أنني لم أقم بتقديم مثالي المعتاد
هنا، ولكن سيعرض الفيديو القادم مثالاً باستخدام
عمليات النقل والتحويل و وبعض الأشياء الأخرى التي كنا
نتعلمها طوال الوقت. اّمل أن تلقوا نظرة عليها و وتشعروا بمزيد من الثقة عند تطبيق
ما تعلمناه للتو بخصوص التحويلات. حظ سعيد.