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

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

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

Free-Learn

تابع Translate در CSS

با استفاده از تابع translate در CSS میتوان موقعیت قرار گیری ( پوزیشِن ) عناصر را در محور X ( بصورت افقی ) و Y ( بصورت عمودی ) مشخص و یا تعریف کرد.

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

نسخه CSS3

Free-Learn

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

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

مثال شماره ۱ : وسط قرار دادن یک عنصر با استفاده از این تابع

امتحان کنید

Free-Learn

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

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

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

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

Free-Learn

شکل نوشتاری

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

Free-Learn

جدول مقادیر

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

مقدار توضیح
<x>  یک مقدار عددی یا واحد اندازه گیری همچون px , % و..
آموزش واحدهای اندازه گیری در CSS
مثال :

یا
<y> یک مقدار عددی یا واحد اندازه گیری همچون px , % و..
آموزش واحدهای اندازه گیری در CSS
مثال :

یا

Free-Learn

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

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

Free-Learn

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