ফাংশন scale

ফাংশন scale একটি এলিমেন্ট স্কেল করে: এটিকে একাধিক গুণ বড় বা ছোট করে। স্কেলিং সম্পাদন করা হয় সেই বিন্দুটিকে কেন্দ্র করে যা transform-origin বৈশিষ্ট্য দ্বারা নির্ধারিত হয়।

এটি একটি বা দুটি প্যারামিটার নিতে পারে, যা কমা দ্বারা পৃথক করা হয়। যদি দুটি প্যারামিটার থাকে - প্রথমটি অনুভূমিকভাবে স্কেলিং নির্ধারণ করে, এবং দ্বিতীয়টি - উল্লম্বভাবে। যদি একটি প্যারামিটার থাকে তবে এটি অনুভূমিক এবং উল্লম্ব উভয় দিকেই একই সাথে স্কেলিং নির্ধারণ করে।

প্যারামিটারের মান হল পূর্ণসংখ্যা বা ভগ্নাংশ সংখ্যা। যদি এটি 1 এর বেশি হয় - এলিমেন্টটি বড় হয়, যদি কম হয় (উদাহরণস্বরূপ, 0.5) - এলিমেন্টটি ছোট হয়। যদি 1 নির্ধারণ করা হয় - কিছুই পরিবর্তন হবে না (এটিই হল ডিফল্ট মান)।

সিনট্যাক্স

cssসেলেক্টর {
  transform: scale(এক বা দুটি সংখ্যা);
}

উদাহরণ

ব্লকের উপর হভার করলে উভয় অক্ষে 1.5 গুণ স্কেল বাড়ানো হবে:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scale(1.5);
}

Результат:

উদাহরণ

উভয় অক্ষে 2 গুণ স্কেল কমিয়ে দেওয়া হবে:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scale(0.5);
}

Результат:

উদাহরণ

X অক্ষ বরাবর 2 গুণ স্কেল বাড়ানো হবে:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scale(2, 1);
}

Результат:

উদাহরণ

Y অক্ষ বরাবর 2 গুণ স্কেল বাড়ানো হবে:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scale(1, 2);
}

Результат:

আরও দেখুন