CSS matrix3d() ফাংশন

বিবরণ ও ব্যবহার

CSS- matrix3d() ফাংশন 16টি মূল্য ধারণকারী 4x4 ম্যাট্রিক্স ব্যবহার করে ত্রিমাত্রিক রূপান্তর নির্দেশ করে:

প্রতিমান

উদাহরণ 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)

তকনীকী বিবরণ

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

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

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

সূত্র:CSS transform অপারেন্স

সূত্র:CSS matrix() ফাংশন

শিক্ষা:CSS 3D ট্রান্সফর্ম