وظيفة matrix() في CSS

التعريف والاستخدام

CSS matrix() تعرف الوظيفة تحويل ثنائي الأبعاد عبر مصفوفة تحتوي على ستة أرقام.

matrix() الوظيفة تأخذ ستة معلمات، وتسمح لك بتحويل العناصر بعمليات الدوران، والتكبير، والتحريك والانزلاق.

المواصفات كالتالي: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())。

مثال

مثال 1

استخدام matrix() تحديد تحويل ثنائي الأبعاد لبعض عناصر <div>:

#myDiv1 {
  transform: matrix(1, -0.3, 0, 1, 0, 50);
}
#myDiv2 {
  transform: matrix(1, 0, 0.5, 1, 50, 50);
}
#myDiv3 {
  transform: matrix(2, 1, 0.5, 1, 90, 70);
}

تجربة بنفسك

مثال 2

استخدام matrix() إنشاء تحويل ثنائي الأبعاد للصور:

#img1 {
  transform: matrix(1, -0.3, 0, 1, 0, 50);
}
#img2 {
  transform: matrix(1, 0, 0.5, 1, 50, 50);
}
#img3 {
  transform: matrix(2, 1, 0.5, 1, 90, 70);
}

تجربة بنفسك

النحو CSS

matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

تفاصيل التقنية

دعم المتصفح

الرقم في الجدول يظهر إصدار المتصفح الذي يدعم هذه الوظيفة بشكل كامل لأول مرة.

الصفحات ذات الصلة

مراجعة:خصائص transform CSS

مراجعة:دالة matrix3d() CSS

دروس:تحويلات CSS 2D