CSS matrix() 函数

定义和用法

CSS 的 matrix() 函数通过包含六个值的矩阵来定义一个二维变换。

matrix() 函数接受六个参数,这些参数允许您对元素进行旋转、缩放、移动和倾斜操作。

参数如下:matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())。

ইনস্ট্যান্স

উদাহরণ 1

ব্যবহার করে matrix() একাধিক <div> এলিমেন্টের জন্য দ্বিমাত্রিক পরিবর্তন নির্ধারণ করুন:

#myDiv1 {
  transform: matrix(1, -0.3, 0, 1, 0, 50);
}
#myDiv2 {
  transform: matrix(1, 0, 0.5, 1, 50, 50);
}
#myDiv3 {
  transform: matrix(2, 1, 0.5, 1, 90, 70);
}

স্বয়ং প্রয়াস করুন

উদাহরণ 2

ব্যবহার করে matrix() ছবিকে দ্বিমাত্রিক পরিবর্তন তৈরি করুন:

#img1 {
  transform: matrix(1, -0.3, 0, 1, 0, 50);
}
#img2 {
  transform: matrix(1, 0, 0.5, 1, 50, 50);
}
#img3 {
  transform: matrix(2, 1, 0.5, 1, 90, 70);
}

স্বয়ং প্রয়াস করুন

CSS গ্রামার

matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())
মূল্য বর্ণনা
scaleX() অপরিহার্য। এলিমেন্টের প্রস্থতা সমস্তৰক্ষা করার জন্য সংখ্যা。
skewY() অপরিহার্য। Y-অক্ষের দিকে ক্রমাণু করার জন্য (ডিগ্রি) সংখ্যা。
skewX() অপরিহার্য। X-অক্ষের দিকে ক্রমাণু করার জন্য (ডিগ্রি) সংখ্যা。
scaleY() অপরিহার্য। এলিমেন্টের উচ্চতা সমস্তৰক্ষা করার জন্য সংখ্যা。
translateX() অপরিহার্য। X-অক্ষের দিকে এলিমেন্ট সরণ করার জন্য সংখ্যা。
translateY() অপরিহার্য। Y-অক্ষের দিকে এলিমেন্ট সরণ করার জন্য সংখ্যা。

টেকনিক্যাল বিবরণ

সংস্করণ: CSS Transforms Module Level 1

ব্রাউজার সমর্থন

টেবিলের সংখ্যা প্রথম সম্পূর্ণরূপে এই ফাংশনটি সমর্থনকারী ব্রাউজার সংস্করণটির জন্য দেখানো হয়েছে。

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

সংশ্লিষ্ট পৃষ্ঠা

পরামর্শ:CSS ট্রান্সফর্ম এট্রিবিউট

পরামর্শ:CSS matrix3d() ফাংশন

টিউটোরিয়াল:CSS 2D ট্রান্সফর্ম