CSS matrix() 函数
- পূর্ববর্তী পৃষ্ঠা CSS log() ফাংশন
- পরবর্তী পৃষ্ঠা CSS matrix3d() ফাংশন
- উপরের স্তরে ফিরুন CSS ফাংশন রেফারেন্স ম্যানুয়েল
定义和用法
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 ট্রান্সফর্ম
- পূর্ববর্তী পৃষ্ঠা CSS log() ফাংশন
- পরবর্তী পৃষ্ঠা CSS matrix3d() ফাংশন
- উপরের স্তরে ফিরুন CSS ফাংশন রেফারেন্স ম্যানুয়েল