CSS translate هدجيج نص

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

تحرك الخصائص تسمح لك بتغيير موضع العنصر.

تحرك تعريف خصائص الاتجاه x والاتجاه y للعنصر في المكان الثنائي. يمكنك أيضًا تعريف محور z لتغيير الموقع في الفضاء الثلاثي الأبعاد.

يمكن أن يقدم الاتجاهات فقط للاتجاه x، أو الاتجاه x والاتجاه y، أو الاتجاه x والاتجاه y والاتجاه z.

للتفهم بشكل أفضل تحرك للإطلاع على خصائصعرض.

نصيحة:لجعل خصائص محور z تعمل، تحتاج إلى تعريف قيمة لمخصائص CSS perspective.

ملاحظة:تقنية أخرى لتغيير موضع العنصر هي استخدام CSS translate() فونكشن خصائص CSS transform في هذه الصفحة يمكن القول أنها طريقة أكثر بساطة وديناميكية لتغيير موضع العنصر.

مثال

مثال 1

تغيير موقع العنصر:

div {
  تحرك: 100px 20px;
}

تجربة شخصية

مثال 2

عند تعيين محور z تحرك عند تعيين محور z، يجب أيضًا تعيينه في العنصر الأب. نظرة لن نتمكن من رؤية أي تأثير حتى نتمكن من رؤية الخصائص.

DIV1 {
  نظرة: 200px;
}
DIV2 {
  تحرك: 50px 50px 50px;
}

تجربة شخصية

نحو CSS

تحرك: محور x محور y محور z|القيمة الافتراضية|وراثة;

قيمة الخصائص

القيمة الوصف
محور x

تحديد الموقع في المحور x. القيم الممكنة:

  • الطول
  • النسبة المئوية
محور y

تحديد الموقع في المحور y. القيم الممكنة:

  • الطول
  • النسبة المئوية
محور z

تحديد الموقع في المحور z. القيم الممكنة:

  • الطول
  • النسبة المئوية
القيمة الافتراضية ضع هذا الخصائص في قيمته الافتراضية. انظر القيمة الافتراضية.
وراثة يرجى الرجوع إلى الأب لوراثة هذا الخصائص. انظر وراثة.

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

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

دعم المتصفح

الرقم في الجدول يعكس إصدار المتصفح الذي يدعم هذا الخصائص بشكل كامل.

كروم إيدج فايرفوكس سفاري أوبرا
104 104 72 14.1 90

الصفحات ذات الصلة

دروس CSS:CSS 2D تحويل

دروس CSS:CSS 3D تحويل

مرجع CSS:属性 yin yin scale CSS

مرجع CSS:属性 yin yin rotate CSS

مرجع CSS:属性 yin yin perspective CSS