توابع CSS translate()

تعریف و استفاده

CSS ترجمه() این تابع به شما اجازه می‌دهد تا موقعیت عنصر را تغییر دهید.

ترجمه() در تبدیل در استفاده از این ویژگی.

مثال

تغییر موقعیت عنصر:

#myDiv1 {
  transform: ترجمه(50px); /* عنصر را 50px در محور x و 0px در محور y حرکت می‌دهد */
}
#myDiv2 {
  transform: ترجمه(50px, 20px); /* عنصر را 50px در محور x و 20px در محور y حرکت می‌دهد */
}
#myDiv3 {
  transform: ترجمه(100px, 30px); /* عنصر را 100px در محور x و 30px در محور y حرکت می‌دهد */
}

آزمایش کنید

نحوه نوشتن CSS

ترجمه(x, y)
مقدار توضیح
x ضروری. فاصله حرکت عنصر در محور x را تعریف می‌کند، می‌تواند عدد یا درصد باشد.
y

اختیاری. فاصله حرکت عنصر در محور y را تعریف می‌کند، می‌تواند عدد یا درصد باشد.

اگر حذف شود، مقدار به 0 تنظیم می‌شود.

جزئیات فنی

نسخه: CSS Transforms Module Level 1

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

اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهایی است که این تابع را کامل پشتیبانی می‌کنند.

کروم اینجر افرادا سافاری آپرا
1 12 3.5 3.1 10.5

صفحات مرتبط

تدریس:CSS 2D Transform

منابع:ویژگی transform CSS

منابع:توابع translateX() CSS

منابع:توابع translateY() CSS

منابع:ویژگی transform HTML DOM