مصفوفات CSS : خصائص الإزاحة والتحويل في لغة CSS

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

 

تعريف

transform matrix(a , b , c , d ,x, y);

الذي يعتمد على:

  • أ: مقياس س إحداثيات.
  • ب: انحراف إحداثيات ص.
  • ج: الانحراف x الإحداثيات.
  • د: مقياس إحداثيات ص.
  • x: تحويل موضع x.
  • y: تحويل موضع y.

 

فوائد مصفوفات CSS

ستمكننا وظيفة التحويل في css من توفير الوقت للقيام بمهام التحويل السريع. عند استخدام الرسوم المتحركة لـ CSS ، ستكون قد وفرت الوقت باستخدام JavaScript ، على سبيل المثال ، وهذه إحدى ميزات CSS.

 

مثال

من فضلك ، لفهم مصفوفة CSS جيدًا ، انسخ الأكواد التالية وقم بتشغيلها في متصفحك.

CSS

#mat{
    width:200px;
    height:200px;

    background-color :#D9D9D9;

     transform: matrix(2, 0, 0, 2, 200, 200);

     transition:all .7s ease-in-out;
}

 

HTML

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>2D Transform - Matrix</title>
        <link rel='stylesheet' href='file.css' />
    </head>

    <body>
        <div id = "mat">Hello World</div>
    </body>

</html>