این آموزش در تاریخ ۱۴۰۰/۱۰/۱۹ آپدیت شده است.
آموزش تابع scale در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تابع scale در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تابع scale در CSS
با استفاده از تابع scale در CSS میتوان میزان مقیاس ( بزرگ بودن / رشد ) یک عنصر را مشخص و یا تعریف کرد.
مقداری که این تابع میپذیرد عدد می باشد، یک عدد مثبت یا منفی ( مقدار منفی برعکس میکند ) و مقدار مثبت باعث رشد / بزرگتر شدن عنصر میشه
این تابع به عنوان یک مقدار در ویژگی transform مورد استفاده قرار میگیرد.
| نسخه | CSS3 |
|---|
Free-Learn
مثال از تابع scale در CSS
در ادامه میتوانید یک مثال از این تابع را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : استفاده از یک مقدار ( هم بصورت افقی و هم عمودی )
|
1 2 3 4 5 6 7 |
<style> img:hover{ transform:scale(1.5); } </style> |
مثال شماره ۲ : استفاده از ۲ مقدار ( مقدار اول بصورت افقی و مقدار دوم بصورت عمودی )
|
1 2 3 |
img:hover{ transform: scale(1.5 , 3); } |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تابع scale در CSS پشتیبانی میکنند یا خیر.
| نام تابع | Chrome | Firefox | Opera | Safari | Edge |
| ()scale | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این تابع در CSS بصورت زیر می باشد.
|
1 2 3 |
scale ( X , Y ); یا scale ( X_Y ); |
Free-Learn
جدول مقادیر
در جدول زیر میتوانید، مقادیری را که میتوان در این تابع استفاده کرد مشاهده نمایید.
| مقدار | توضیح | ||
|---|---|---|---|
| X , Y | یک مقدار عددی مثبت یا منفی از ۰٫۰ تا بی نهایت مثال : ( ۲ مقداری )
|
||
| X_Y | یک مقدار عددی مثبت یا منفی از ۰٫۰ تا بی نهایت مثال : ( تک مقداری )
|
Free-Learn
نکات و توضیحات
- از مقادیر منفی میتوان در این تابع استفاده کرد و باعث میشه عنصر ( حالا میخواد تصویر باشه یا .. ) برعکس بشه
