توابع matrix3d() در 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);
  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 لازم است. عددی که تعریف می‌کند تغییرات باید اعمال شود.

جزئیات فنی

نسخه‌ی: CSS Transforms Module Level 2

پشتیبانی بروزر

تبلویغات میزانجی، نسخه‌ی اولین بروزر که کامل از این کارکرد پشتیبانی می‌کند.

Chrome Edge Firefox Safari آپرا
12 12 10 4 15

معلوماتی پیج

مطالعه:CSS transform امتیازی

مطالعه:CSS matrix() فانکشن

تعلیم:CSS 3D تبدیلی