ویژگی translate CSS

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

translate ویژگی به شما اجازه می‌دهد تا موقعیت عنصر را تغییر دهید.

translate ویژگی مختصات محور x و y عنصر را در فضای دو بعدی تعریف می‌کند. شما همچنین می‌توانید مختصات محور z را تعریف کنید تا موقعیت در فضای سه بعدی تغییر کند.

مختصات می‌تواند شامل تنها مختصات محور x باشد، یا مختصات محور x و y، یا مختصات محور x، y و z.

برای درک بهتر translate ویژگی، لطفاً به: نگاه کنیدنمایش.

نکته:برای اینکه ویژگی محور z کار کند، باید مقدار CSS perspective تعریف شود.

توجه داشته باشید:یک روش دیگر برای حرکت دادن عناصر استفاده از توابع translate() CSS ویژگی CSS transform این صفحه می‌تواند به عنوان روشی ساده‌تر و مستقیم‌تر برای حرکت دادن عناصر مطرح شود.

مثال

مثال 1

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

div {
  translate: 100px 20px;
}

آزمایش کنید

مثال 2

وقتی که موقعیت محور z تنظیم می‌شود: translate ویژگی باید در عنصر پدر نیز تنظیم شود وقتی که این ویژگی تنظیم می‌شود: perspective ویژگی‌هایی که ما باید ببینیم تا بتوانیم هرگونه اثری را مشاهده کنیم:

DIV1 {
  perspective: 200px;
}
DIV2 {
  translate: 50px 50px 50px;
}

آزمایش کنید

جملات CSS

translate: x-axis y-axis z-axis|initial|inherit;

مقدار ویژگی

مقدار توضیح
x-axis

موقعیت در محور x تعریف شده. مقادیر ممکن:

  • طول
  • درصد
y-axis

موقعیت در محور y تعریف شده. مقادیر ممکن:

  • طول
  • درصد
z-axis

موقعیت در محور z تعریف شده. مقادیر ممکن:

  • طول
  • درصد
initial این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. به: مراجعه کنید initial.
inherit این ویژگی را از عنصر پدر خود ارث می‌برد. به: مراجعه کنید inherit.

جزئیات فنی

مقدار پیش‌فرض: none
نمایندگی: خیر
انیمیشن‌سازی: پشتیبانی. لطفاً به: مراجعه کنیدویژگی‌های مرتبط با انیمیشن.
نسخه: CSS3
جملات برنامه‌نویسی JavaScript: object.style.translate="10px 20px"

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

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

Chrome Edge Firefox Safari Opera
104 104 72 14.1 90

صفحات مرتبط

تدریس CSS:ترجمه 2D CSS

تدریس CSS:ترجمه 3D CSS

مرجع CSS:ویژگی scale CSS

مرجع CSS:ویژگی rotate CSS

مرجع CSS:ویژگی perspective CSS