توابع matrix() CSS

صفحه قبل توابع log() CSS
صفحه بعدی توابع matrix3d() CSS
برگشت به طبقه بالاتر دستورالعمل‌های مرجع تابع CSS

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

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

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

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

مثال

مثال 1

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

#myDiv1 {
  transform: ماتریس(1, -0.3, 0, 1, 0, 50);
}
#myDiv2 {
  transform: ماتریس(1, 0, 0.5, 1, 50, 50);
}
#myDiv3 {
  transform: ماتریس(2, 1, 0.5, 1, 90, 70);
}

آزمایش کنید

مثال 2

با استفاده از ماتریس() برای ایجاد تبدیلات دو بعدی برای تصاویر:

#img1 {
  transform: ماتریس(1, -0.3, 0, 1, 0, 50);
}
#img2 {
  transform: ماتریس(1, 0, 0.5, 1, 50, 50);
}
#img3 {
  transform: ماتریس(2, 1, 0.5, 1, 90, 70);
}

آزمایش کنید

قوانین CSS

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

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