آموزش تابع scale در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تابع scale در CSS با من همراه باشید.

آموزش تابع scale در CSS

Free-Learn

تابع scale در CSS

با استفاده از تابع scale در CSS میتوان میزان مقیاس ( بزرگ بودن / رشد ) یک عنصر را مشخص و یا تعریف کرد.

مقداری که این تابع میپذیرد عدد می باشد، یک عدد مثبت یا منفی ( مقدار منفی برعکس میکند ) و مقدار مثبت باعث رشد / بزرگتر شدن عنصر میشه. ( مثال شماره ۱ و ۳ )

این تابع به عنوان یک مقدار در ویژگی transform مورد استفاده قرار میگیرد.

نسخه CSS3

Free-Learn

مثال از تابع scale در CSS

در ادامه میتوانید یک مثال از این تابع را در زبان CSS مشاهده نمایید.

مثال شماره ۱ : اگه از یک مقدار استفاده بشه اون مقدار هم بصورت افقی و هم عمودی محاسبه میشه، ولی خب میشه از ۲ مقدار مجزا ( محور x و y ) هم استفاده کرد.

امتحان کنید

مثال شماره ۲ : استفاده از ۲ مقدار ( مقدار اول محور X یا افقی – مقدار دوم محور Y یا عمودی )

امتحان کنید

مثال شماره ۳ : استفاده از مقدار منفی

امتحان کنید

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تابع scale در CSS پشتیبانی میکنند یا خیر.

» عددی که در کنار -webkit- و -moz- و -ms- وجود دارد ، یعنی از آن نسخه به بالا باید از این پیشوند استفاده نمایید. ( درباره پیشوندها بیشتر بخوانید )

نام تابع Chrome Firefox Opera Safari IE
()scale ۳۶٫۰
۴٫۰ -webkit-
۱۶٫۰
۳٫۵ -moz-
۲۳٫۰
۱۵٫۰ -webkit-
۱۰٫۵ -o-
۹٫۰
۳٫۲ -webkit-
۱۰٫۰
۹٫۰ -ms-

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این تابع در CSS بصورت زیر می باشد.

Free-Learn

جدول مقادیر

در جدول زیر میتوانید، مقادیری را که میتوان در این تابع استفاده کرد مشاهده نمایید.

مقدار توضیح
<number-x>  یک مقدار عددی مثبت یا منفی از ۰٫۰ تا بی نهایت
مثال :

یا
<number-y>  یک مقدار عددی مثبت یا منفی از ۰٫۰ تا بی نهایت
مثال :

یا

Free-Learn

نکات و توضیحات

  • از مقادیر منفی میتوان در این تابع استفاده کرد و باعث میشه عنصر ( حالا میخواد تصویر باشه یا .. ) برعکس بشه.
  • برخی از مرورگرها در نسخه های قدیمی تر از این ویژگی پشتیبانی نمی کنند لذا باید برای حل این مشکل از یسری دستورات پیشوندی از نسخه مشخص شده آن مرورگر ( که در جدول پشتیبانی مرورگرها مشخص شده ) استفاده نمایید.
  • -webkit- برای مرورگر کروم و سافاری و اُپرا
  • -moz- برای مرورگر موزیلا فایرفاکس
  • -ms- برای مرورگر اینترنت اکسپلورر

Free-Learn

دریافت PDF یا پرینت این مطلب