وصف الوظيفة

وظيفة matrix3d() في CSS

تعريف و استخدام matrix3d() تعريف وظيفة matrix3d() من خلال استخدام مصفوفة 4x4 تحتوي على 16 قيمة لتحديد التحول ثلاثي الأبعاد:

matrix3d() =　　　
a1 a2 a3 a4
b1 b2 b3 b4
c1 c2 c3 c4
d1 d2 d3 d4

مثال

مثال 1

استخدام matrix3d() تحديد تحويل ثلاثي الأبعاد لـ <div>:

.div1 {
  transform: matrix3d(
    0.7, 0.1, 0.7, 0
    -0.6, 0.7, 0.2, 0
    -0.5, -0.8, 0.7, 0
    10, 10, 0, 1
  );
  font-size: 30px;
  font-weight: bold;
  width: 280px;
  padding: 10px;
  background: beige;
  font-family: verdana;
  border: 1px solid green;
}

تجربة بنفسك

مثال 2

استخدام matrix3d() إنشاء تحويل ثلاثي الأبعاد لـ <div> آخر:

.div1 {
  font-size: 30px;
  font-weight: bold;
  width: 280px;
  height: 40px;
  padding: 10px;
  background: beige;
  font-family: verdana;
  border: 1px solid green;
  transform-style: preserve-3d;
  transition: transform 1.5s;
  transform: rotate3d(1, 1, 1, 30deg);
  margin: 50px auto;
}
.div1:hover {
.div1:focus {
  transform: rotate3d(1, 1, 1, 30deg);
  matrix3d(1, 0, 0, 0, 0, 1, 6, 0, 0, 0, 1, 0, 50, 100, 0, 1.1);
}

تجربة بنفسك

نصاب CSS

matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
القيمة الوصف
a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3 مطلوب. تعريف الرقم الذي يحدد التحول الخطي.
a4 b4 c4 d4 مطلوب. تعريف الرقم الذي يحدد التحول الذي سيتم تطبيقه.

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

الإصدار: مодуل Transforms CSS Level 2

دعم المتصفح

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

Chrome Edge Firefox Safari Opera
12 12 10 4 15

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

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

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

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