يترجم
اسم "ترجمة" مضلل بعض الشيء. إنها في الواقع طريقة لتحديد موضع العناصر باستخدام قيم الإحداثيات X وY.
وفيما يلي المحتوى المقتبس: #التنقل{ |
دعم المتصفح
سمة الترجمة مدعومة حاليًا فقط بواسطة Firefox وSafari وChrome، ويجب أن تستخدم البادئات الخاصة للمتصفح -moz- و-webkit-.
انحراف
يعد Skew أيضًا دالة تحويل مفيدة، حيث يمكنها إمالة كائن بزاوية معينة حول المحورين x وy. وهذا يختلف عن دوران التدوير، الذي يدور فقط دون تغيير شكل العنصر. Skew يغير شكل العنصر. يحتوي Skew على معلمتين تمثلان إمالة المحورين x وy على التوالي.
وفيما يلي المحتوى المقتبس: #التنقل{ |
دعم المتصفح
السمة 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، لكن مبدأ تحويل المصفوفة عالمي .
دعونا نلقي نظرة على مثال:
وفيما يلي المحتوى المقتبس: #التنقل{ |
دعم المتصفح
والخبر السار هو أن IE يدعم مرشحات المصفوفة، على الرغم من أنه لا يدعم معظم وظائف تحويل CSS3، إلا أنه يمكنك تحقيق نفس التأثير بشكل أساسي باستخدام هذا المرشح. ومع ذلك، يجب عليك أولاً فهم عمليات المصفوفة. يدعم كل من webkit وFirefox (3.5+) هذه الميزة.
تشوه السلسلة
غالبًا ما تكون التحويلات مستقلة بذاتها، ولكن إذا كنت تريد استخدام تحويلات متعددة في نفس الوقت، فيمكن دمج التعليمات البرمجية بسرعة، خاصة باستخدام الامتدادات الخاصة. لحسن الحظ، لدينا بعض الاختصارات المضمنة:
وفيما يلي المحتوى المقتبس: #التنقل{ |
يمكن ربط هذه التحويلات معًا لجعل التعليمات البرمجية الخاصة بك أكثر كفاءة:
وفيما يلي المحتوى المقتبس: التنقل { |
أصل التحويل
تحويل الأصل ليس وظيفة فرعية للتحويل، ولكنه يرتبط ارتباطًا وثيقًا بالتحويل. يمكن استخدامه لتحديد نقطة البداية للتحويل. على سبيل المثال، نقطة البداية الافتراضية لتحويل التدوير هي المنتصف. يمكنك تعيين نقطة البداية في الزاوية اليسرى العليا أو الزاوية اليسرى السفلية، بحيث تظهر نتائج قد يكون تحويل التدوير مختلفًا جدًا.
يقبل تحويل الأصل معلمتين، والتي يمكن أن تكون قيمًا محددة مثل النسبة المئوية أو em أو px وما إلى ذلك، أو معلمات وصفية مثل اليسار أو الوسط أو اليمين أو الأعلى أو الأوسط أو الأسفل وما إلى ذلك. بعض الأمثلة:
وفيما يلي المحتوى المقتبس: .class1{-moz-transform-origin: 0 0; |
توافق المتصفح
هذه السمة مدعومة حاليًا فقط بواسطة webkit وfirefox، وتتطلب إضافة البادئة الخاصة بها.