الصفحة الرئيسية>دروس تصميم الويب>توحيد الويب

تقنية الرسوم المتحركة CSS3 التي تحتاج إلى معرفتها (2)

الكاتب：Eve Cole وقت التحديث：2025-01-15 16:16:56

يترجم

اسم "ترجمة" مضلل بعض الشيء. إنها في الواقع طريقة لتحديد موضع العناصر باستخدام قيم الإحداثيات X وY.

وفيما يلي المحتوى المقتبس:

#التنقل{
/* سيؤدي هذا إلى نقل عنصر التنقل بمقدار 10 بكسل إلى اليسار و20 بكسل إلى الأسفل */
-moz-transform: ترجمة (10px، 20px)؛
-تحويل webkit: ترجمة (10px، 20px)؛
}

دعم المتصفح

سمة الترجمة مدعومة حاليًا فقط بواسطة Firefox وSafari وChrome، ويجب أن تستخدم البادئات الخاصة للمتصفح -moz- و-webkit-.

انحراف

يعد Skew أيضًا دالة تحويل مفيدة، حيث يمكنها إمالة كائن بزاوية معينة حول المحورين x وy. وهذا يختلف عن دوران التدوير، الذي يدور فقط دون تغيير شكل العنصر. Skew يغير شكل العنصر. يحتوي Skew على معلمتين تمثلان إمالة المحورين x وy على التوالي.

وفيما يلي المحتوى المقتبس:

#التنقل{
/* سيؤدي هذا إلى نقل عنصر التنقل بمقدار 10 بكسل إلى اليسار و20 بكسل إلى الأسفل */
-moz-transform: skew(30deg, -10deg);
-تحويل webkit: انحراف (30 درجة، -10 درجة)؛
}

دعم المتصفح

خاصية Skew مدعومة حاليًا فقط من خلال Firefox وSafari وChrome، وتستخدم البادئات الخاصة للمتصفح -moz- و-webkit-.

مصفوفة

نعم، المصفوفة هي مصفوفة، وهي شيء أساسي جدًا في الرياضيات المتقدمة، وهي بالفعل وظيفة متقدمة جدًا في CSS 3. يقدم CSS 3 وظيفة المصفوفة، والتي يمكنها تحقيق التأثيرات المختلفة المذكورة أعلاه بمرونة شديدة. لديها 6 معلمات (a، b، c، d، e، f)، وهي في الواقع مصفوفة 3*3 يتم من خلالها تحويل المعلمات القديمة إلى قيم جديدة:

|

|

|.0 0 1 |

إذا كنت مهتمًا بالدراسة المتعمقة، يمكنك إلقاء نظرة هنا http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined هذه وثيقة لـ SVG، لكن مبدأ تحويل المصفوفة عالمي .

دعونا نلقي نظرة على مثال:

وفيما يلي المحتوى المقتبس:

#التنقل{
/* سيتم إمالة عنصر التنقل مثل الزاوية اليمنى العليا */
-moz-transform: Matrix(1, -0.2, 0, 1, 0, 0);
-تحويل webkit: مصفوفة (1، -0.2، 0، 1، 0، 0)؛
}

دعم المتصفح

والخبر السار هو أن IE يدعم مرشحات المصفوفة، على الرغم من أنه لا يدعم معظم وظائف تحويل CSS3، إلا أنه يمكنك تحقيق نفس التأثير بشكل أساسي باستخدام هذا المرشح. ومع ذلك، يجب عليك أولاً فهم عمليات المصفوفة. يدعم كل من webkit وFirefox (3.5+) هذه الميزة.

تشوه السلسلة

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

وفيما يلي المحتوى المقتبس:

#التنقل{
-moz-transform: ترجمة (10، 25)؛
-تحويل webkit: ترجمة (10، 25)؛
-تحويل moz: تدوير (90 درجة)؛
-تحويل webkit: تدوير (90 درجة) ؛
-moz-transform: مقياس (2، 1)؛
-تحويل webkit: مقياس (2، 1)؛
}

يمكن ربط هذه التحويلات معًا لجعل التعليمات البرمجية الخاصة بك أكثر كفاءة:

وفيما يلي المحتوى المقتبس:

التنقل {
-moz-transform: ترجمة (10، 25) تدوير (90 درجة) مقياس (2، 1)؛
-تحويل webkit: ترجمة (10، 25) تدوير (90 درجة) مقياس (2، 1)؛
}


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

أصل التحويل

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

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

وفيما يلي المحتوى المقتبس:

.class1{-moz-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
...
}
.class2{-moz-transform-origin:100% 100%;
-webkit-transform-origin:100% 100%;
...}
.class3{-moz-transform-origin:أعلى اليسار؛
-webkit-transform-origin:أعلى اليسار؛
...}

توافق المتصفح

هذه السمة مدعومة حاليًا فقط بواسطة webkit وfirefox، وتتطلب إضافة البادئة الخاصة بها.

مقالات ذات صلة