این آموزش در تاریخ ۱۴۰۰/۱۰/۱۹ آپدیت شده است.
آموزش تابع translate در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تابع translate در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تابع Translate در CSS
با استفاده از تابع translate در CSS میتوان موقعیت قرار گیری ( پوزیشِن ) عناصر را در محور X ( بصورت افقی ) و Y ( بصورت عمودی ) مشخص و یا تعریف کرد.
این تابع به عنوان یک مقدار در ویژگی transform مورد استفاده قرار میگیرد.
| نسخه | CSS3 |
|---|
Free-Learn
مثال از تابع Translate در CSS
در ادامه میتوانید یک مثال از این تابع را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : قرار دادن یک باکس در وسط صفحه ( بصورت افقی و عمودی )
|
1 2 3 4 5 6 7 8 |
.MyBox{ transform: translate(-50%, -50%); position: absolute; right: 50%; left:50%; top:50%; bottom:50%; } |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تابع translate در CSS پشتیبانی میکنند یا خیر.
| نام تابع | Chrome | Firefox | Opera | Safari | Edge |
| ()translate | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این تابع در CSS بصورت زیر می باشد.
|
1 2 3 |
translate ( X , Y ); یا translate ( X_Y ); |
Free-Learn
جدول مقادیر
در جدول زیر میتوانید، مقادیری را که میتوان در این تابع استفاده کرد مشاهده نمایید.
| مقدار | توضیح | ||
|---|---|---|---|
| X , Y |
استفاده از واحدهای اندازه گیری همچون px , % و.. آموزش واحدهای اندازه گیری در CSS مثال : ( استفاده از ۲ مقدار ) مقدار اول برای محور X ها و مقدار دوم برای محور Y ها
|
||
| X_Y | استفاده از واحدهای اندازه گیری همچون px , % و.. آموزش واحدهای اندازه گیری در CSS مثال : ( استفاده از ۱ مقدار هم برای محور X ها و هم Y ها )
|
Free-Learn
نکات و توضیحات
- از مقادیر منفی میتوان در این تابع استفاده کرد
