خصائص translate CSS

الصفحة السابقة transition-timing-function
الصفحة التالية unicode-bidi

التعريف والاستخدام

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 المحور y المحور z|القيمة الافتراضية|التوريث;

قيمة الخاصية

القيمة	الوصف
المحور x	يحدد الموقع في المحور x. القيم الممكنة: الطول النسبة المئوية
المحور y	يحدد الموقع في المحور y. القيم الممكنة: الطول النسبة المئوية
المحور z	يحدد الموقع في المحور z. القيم الممكنة: الطول النسبة المئوية
القيمة الافتراضية	ضع الخاصية هذه في قيمتها الافتراضية. راجع القيمة الافتراضية.
التوريث	ينتقل هذا الخاصية من عنصر الأب. راجع التوريث.

تفاصيل التقنية

القيمة الافتراضية:	لا شيء
التوريث:	لا
صنع التحرك:	يدعم. راجع:خصائص متعلقة بالتحرك.
الإصدار:	CSS3
جافا سكربت نحو:	object.style.translate="10px 20px"