أصل التحويل والمنظور
غيّر نقطة ارتكاز التحويلات باستخدام transform-origin وأضف عمقًا باستخدام perspective
أصل التحويل والمنظور درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
القيمة الافتراضية لـ transform-origin
تحدث التحويلات افتراضيًا حول النقطة المركزية للعنصر: 50% 50%. وتغيّر خاصية transform-origin نقطة الارتكاز هذه.
تعيين transform-origin
تقبل كلمات مفتاحية أو نسبًا مئوية أو أطوالًا. الصيغة: x-axis y-axis z-axis.
<div class="spinning-logo">Logo</div>
<div class="page-fold">Fold</div>
<div class="tooltip">Info</div>transform-origin مع تغيير الحجم
تغيير الحجم انطلاقًا من الزاوية العلوية اليسرى، وهو مفيد لتحريك توسيع القوائم المنسدلة:
<div class="dropdown open">Dropdown menu</div>transform-origin مع الدوران
تدوير عقرب ساعة حول قاعدته:
<div class="clock"><div class="hand"></div></div>خاصية perspective
تحدّد perspective المسافة بين المستخدم ومستوى z=0 للتحويلات ثلاثية الأبعاد. تنشئ القيم الأصغر تشوهًا منظوريًا أكثر وضوحًا، بينما تنشئ القيم الأكبر عمقًا خفيفًا.
<div class="scene"><div class="card">A</div></div>
<div class="scene-wide"><div class="card">B</div></div>perspective-origin
تغيّر نقطة تلاشي المنظور. القيمة الافتراضية هي المركز (50% 50%).
<div class="scene"><div class="card">Card</div></div>perspective كدالة
يمكن أيضًا استخدام perspective() كدالة تحويل على العنصر نفسه، وليس على العنصر الأب. ويقتصر سياق الأبعاد الثلاثية عندئذٍ على ذلك العنصر فقط.
<div class="card">Card</div>transform-style: preserve-3d
تُسطَّح تحويلات العناصر الفرعية ثلاثية الأبعاد افتراضيًا إلى بعدين. عيّن transform-style: preserve-3d على العنصر الأب للحفاظ على الموضع الثلاثي الأبعاد الحقيقي للعناصر الفرعية.
<div class="scene">
<div class="card-front">Front</div>
<div class="card-back">Back</div>
</div>تأثير قلب البطاقة
بطاقة القلب التقليدية باستخدام perspective وpreserve-3d:
<div class="card-wrapper">
<div class="card"><div class="card-back">Back</div></div>
</div>
<div class="card-wrapper">
<div class="card flipped"><div class="card-back">Back (flipped)</div></div>
</div>backface-visibility
تخفي backface-visibility: hidden الوجه الخلفي لعنصر محوّل ثلاثي الأبعاد. وهي ضرورية لبطاقات القلب التي يجب ألا يظهر وجهها الخلفي من خلال الوجه الأمامي.
دمج perspective وorigin
تأثير ميل ثلاثي الأبعاد درامي عند المرور بالمؤشر، يستجيب لموضع المؤشر:
<div class="card demo-active">3D Tilt Card</div>تحقق سريع
تستخدم قائمة منسدلة transform: scaleY(0) لإخفائها وscaleY(1) لإظهارها. أي transform-origin يجعلها تتمدد إلى الأسفل انطلاقًا من الأعلى؟
مراجعة
تغيّر transform-origin نقطة الارتكاز للدوران وتغيير الحجم، وهو أمر أساسي لتوسيع القوائم المنسدلة وعقارب الساعة وميل العناصر عند المرور بالمؤشر. ينشئ perspective على العنصر الأب سياق العمق الثلاثي الأبعاد. وتتيح transform-style: preserve-3d العناصر ثلاثية الأبعاد المتداخلة. بينما تخفي backface-visibility: hidden الأوجه الخلفية للعناصر في تأثيرات القلب.
الأسئلة الشائعة
هل درس «أصل التحويل والمنظور» مجاني؟
نعم — نص درس «أصل التحويل والمنظور» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «أصل التحويل والمنظور»؟
غيّر نقطة ارتكاز التحويلات باستخدام transform-origin وأضف عمقًا باستخدام perspective تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «أصل التحويل والمنظور»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- Translate وRotate وScale
- تحويلات Skew وMatrix
- أصل التحويل والمنظور
- التحويلات ثلاثية الأبعاد: rotateX وrotateY وtranslateZ