CSS translate کا اپریشنٹ

پچ بندی پچ بندی transition-timing-function
آئندہ صفحہ unicode-bidi

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

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

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

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

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

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

توجه:یک روش دیگر برای جابجایی عنصر استفاده از CSS translate() فنکشن ویژگی 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
جمله برنامه‌نویسی جاوااسکریپت:	object.style.translate="10px 20px"