توابع matrix() CSS

پچھلے پہلہ CSS log() فنکشن
آئندہ پہلہ CSS matrix3d() فنکشن
ایک سطر اوپر واپس سی ایس ایس فنکشن مراجع منول

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

CSS ماتریس() این توابع یک تغییرات دو بعدی را با استفاده از ماتریسی که شامل شش مقدار است، تعریف می‌کنند.

ماتریس() این توابع شش پارامتر دارند که به شما اجازه می‌دهند عملیات چرخش، بزرگ‌کردن، حرکت و کج کردن عناصر را انجام دهید.

پارامترها به شرح زیر است: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())。

مثال

مثال 1

مثال ماتریس() برای چندین عنصر <div> تغییرات دو بعدی تعریف کنید:

#myDiv1 {
  ترجمه: matrix(1, -0.3, 0, 1, 0, 50);
}
#myDiv2 {
  ترجمه: matrix(1, 0, 0.5, 1, 50, 50);
}
#myDiv3 {
  ترجمه: matrix(2, 1, 0.5, 1, 90, 70);
}

آزمایش کنید

مثال 2

مثال ماتریس() برای ایجاد تغییرات دو بعدی در تصاویر:

#img1 {
  ترجمه: matrix(1, -0.3, 0, 1, 0, 50);
}
#img2 {
  ترجمه: matrix(1, 0, 0.5, 1, 50, 50);
}
#img3 {
  ترجمه: matrix(2, 1, 0.5, 1, 90, 70);
}

آزمایش کنید

زبان CSS

ماتریس(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

مقدار	توضیحات
بزرگ‌کردنX()	ضروری. عدد، برای بزرگ‌کردن عرض عنصر استفاده می‌شود.
کج کردنY()	ضروری. عدد (درجه)، برای کج کردن عناصر به طول Y استفاده می‌شود.
کج کردنX()	ضروری. عدد (درجه)، برای کج کردن عناصر به طول X استفاده می‌شود.
بزرگ‌کردنY()	ضروری. عدد، برای بزرگ‌کردن ارتفاع عنصر استفاده می‌شود.
ترجمهX()	ضروری. عدد، برای حرکت عناصر به طول X استفاده می‌شود.
ترجمهY()	ضروری. عدد، برای حرکت عناصر به طول Y استفاده می‌شود.