كيفية تطبيق تحويلات متعددة في CSS؟


Answers

إنني أضيف هذه الإجابة ليس لأنها من المحتمل أن تكون مفيدة ولكن لمجرد أنها صحيحة.

بالإضافة إلى استخدام الإجابات الموجودة التي تشرح كيفية إنشاء أكثر من ترجمة واحدة عن طريق ربطها ، يمكنك أيضًا إنشاء مصفوفة 4 × 4 بنفسك

أمسكت الصورة التالية من بعض المواقع العشوائية التي عثرت عليها أثناء استخدام googling والتي تعرض المصفوفات الدورانية:

الدوران حول محور x:
الدوران حول محور y:
الدوران حول المحور z:

لم أتمكن من العثور على مثال جيد للترجمة ، لذا على افتراض أنني أتذكر / أفهمها بشكل صحيح ، الترجمة:

[1 0 0 0]
[0 1 0 0]
[0 0 1 0]
[x y z 1]

شاهد المزيد في مقالة ويكيبيديا حول التحويل بالإضافة إلى البرنامج التعليمي Pragamatic CSS3 الذي يشرحه بشكل جيد. وهناك دليل آخر وجدته يشرح المصفوفات التناوبية العشوائية وهو ملاحظات Egon Rath على المصفوفات

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

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

ولكن ، كما تعلم ، إنها تعمل.

تحرير: لقد أدركت للتو أنني أخطأت في ذكر الإشارة ، وربما كان ذلك أهم استخدام عملي لهذا ، وهو إنشاء تحويلات ثلاثية الأبعاد معقدة بشكل متزايد عبر JavaScript ، حيث ستصبح الأمور أكثر منطقية.

Question

باستخدام CSS ، كيف يمكنني تطبيق أكثر من transform واحد؟

مثال: في ما يلي ، يتم تطبيق الترجمة فقط ، وليس الدوران.

li:nth-child(2) {
    transform: rotate(15deg);
    transform: translate(-20px,0px);        
}



يمكنك تطبيق أكثر من تحويل واحد كالتالي:

li:nth-of-type(2){
    transform : translate(-20px, 0px) rotate(15deg);
}



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

كيف يمكنك أن تفعل ما تريد بعد ذلك؟ ...

لا داعي للقلق ، فالتحول يقبل قيمًا متعددة في نفس الوقت ... لذلك سيعمل هذا الرمز أدناه:

li:nth-child(2) {
  transform: rotate(15deg) translate(-20px, 0px); //multiple
}

إذا كنت تحب اللعب مع التحويل ، فأدخل iframe من MDN أدناه:

<iframe src="https://interactive-examples.mdn.mozilla.net/pages/css/transform.html" class="interactive  " width="100%" frameborder="0" height="250"></iframe>

انظر إلى الرابط أدناه لمزيد من المعلومات:

<< CSS transform >>