ফাংশন scale
ফাংশন scale একটি এলিমেন্ট স্কেল করে:
এটিকে একাধিক গুণ বড় বা ছোট করে।
স্কেলিং সম্পাদন করা হয় সেই বিন্দুটিকে কেন্দ্র করে
যা transform-origin বৈশিষ্ট্য দ্বারা নির্ধারিত হয়।
এটি একটি বা দুটি প্যারামিটার নিতে পারে, যা কমা দ্বারা পৃথক করা হয়। যদি দুটি প্যারামিটার থাকে - প্রথমটি অনুভূমিকভাবে স্কেলিং নির্ধারণ করে, এবং দ্বিতীয়টি - উল্লম্বভাবে। যদি একটি প্যারামিটার থাকে তবে এটি অনুভূমিক এবং উল্লম্ব উভয় দিকেই একই সাথে স্কেলিং নির্ধারণ করে।
প্যারামিটারের মান হল পূর্ণসংখ্যা বা ভগ্নাংশ সংখ্যা।
যদি এটি 1 এর বেশি হয় - এলিমেন্টটি বড় হয়,
যদি কম হয় (উদাহরণস্বরূপ, 0.5) - এলিমেন্টটি
ছোট হয়।
যদি 1 নির্ধারণ করা হয় - কিছুই পরিবর্তন হবে না
(এটিই হল ডিফল্ট মান)।
সিনট্যাক্স
সেলেক্টর {
transform: scale(এক বা দুটি সংখ্যা);
}
উদাহরণ
ব্লকের উপর হভার করলে উভয় অক্ষে 1.5 গুণ স্কেল বাড়ানো হবে:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(1.5);
}
:
উদাহরণ
উভয় অক্ষে 2 গুণ স্কেল কমিয়ে দেওয়া হবে:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(0.5);
}
:
উদাহরণ
X অক্ষ বরাবর 2 গুণ স্কেল বাড়ানো হবে:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(2, 1);
}
:
উদাহরণ
Y অক্ষ বরাবর 2 গুণ স্কেল বাড়ানো হবে:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(1, 2);
}
: