جدول زمانی

دستورالعمل‌های مرجع CSS

ویژگی‌های CSS

درس‌های انتخابی

پیشنهاد دوره:

کیت ابزار CodeW3C.com

توابع matrix3d() در CSS

صفحه قبلی توابع matrix() CSS
صفحه بعدی توابع max() CSS
برگشت به لایه بالاتر دستورالعمل‌های مرجع function CSS

تعریف و استفاده

CSS 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);
  م边际: 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	ضروری. عددی که تعریف تغییرات اعمالی را مشخص می‌کند.