Translate وRotate وScale
حرّك العناصر باستخدام translate()، وأدرها باستخدام rotate()، وغيّر حجمها باستخدام scale()
Translate وRotate وScale درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
خاصية transform
تطبّق transform تحويلات مرئية ثنائية وثلاثية الأبعاد على العناصر، مثل الحركة والدوران والتحجيم والميل. تحدث التحويلات بعد التخطيط، ولذلك لا تؤثر في العناصر المحيطة.
translate()
ينقل عنصرًا من موضعه الحالي. الوسيطان: إزاحتا x وy.
<div class="card demo-active">Card</div>
<div class="wrap"><div class="centered">Centered</div></div>translateX() translateY() translateZ()
دوال المحاور الفردية لمزيد من الوضوح:
<div class="slide-in active">Slide panel</div>rotate()
يدير عنصرًا بزاوية محددة. تؤدي القيم الموجبة إلى الدوران في اتجاه عقارب الساعة.
<span class="icon demo-active">➤</span>
<span class="spinner">➤</span>scale()
يغيّر حجم عنصر بالتساوي أو حسب المحور. تصغّر القيم الأقل من 1 العنصر، بينما تكبّره القيم الأكبر من 1.
<button class="btn demo-active">Button</button>
<div class="thumb demo-active">Thumb</div>scaleX() وscaleY()
غيّر الحجم بشكل مستقل على أحد المحاور:
<div class="logo">LOGO</div>دمج التحويلات
تُطبَّق دوال التحويل المتعددة بالترتيب (من اليمين إلى اليسار). ويؤثر الترتيب في النتيجة.
<div class="card demo-active">Card</div>أصل التحويل
تحدّد transform-origin نقطة الارتكاز للدوران وتغيير الحجم. القيمة الافتراضية هي المركز (50% 50%).
<div class="card demo-active">Card</div>خصائص التحويل الفردية
تسمح CSS الحديثة بتعيين دوال التحويل الفردية كخصائص منفصلة:
<div class="card demo-active">Card</div>الانتقال مع التحويلات
تُعدّ transform إحدى الخاصيتين اللتين تُركّبان بواسطة GPU. احرص دائمًا على تحريكها باستخدام transition للحصول على تأثيرات سلسة وذات أداء جيد:
<div class="card demo-active">Card</div>translate() مقابل top/left
فضّل دائمًا transform: translate() على top/left عند التحريك. إذ تُركّب transform بواسطة GPU، بينما تؤدي top/left إلى إعادة حساب التخطيط في كل إطار.
تحقق سريع
ما دالة التحويل التي تعكس العنصر أفقيًا، مثل قلب بطاقة؟
مراجعة
تنقل transform العناصر وتديرها وتغيّر حجمها بعد التخطيط، من دون التأثير في المحتوى المحيط. استخدم translate() للحركة، وrotate() للدوران، وscale() لتغيير الحجم. ادمج عدة دوال في تصريح واحد. تدعم CSS الحديثة خصائص التحويل الفردية. احرص دائمًا على استخدام الانتقالات عند التحريك للاستفادة من أداء GPU في تركيب الطبقات.
الأسئلة الشائعة
هل درس «Translate وRotate وScale» مجاني؟
نعم — نص درس «Translate وRotate وScale» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «Translate وRotate وScale»؟
حرّك العناصر باستخدام translate()، وأدرها باستخدام rotate()، وغيّر حجمها باستخدام scale() تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «Translate وRotate وScale»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- Translate وRotate وScale
- تحويلات Skew وMatrix
- أصل التحويل والمنظور
- التحويلات ثلاثية الأبعاد: rotateX وrotateY وtranslateZ