تحويلات Skew وMatrix
أنشئ تشوهات قطرية باستخدام skew() وطبّق مصفوفات تحويل كاملة باستخدام matrix()
تحويلات Skew وMatrix درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
تحويل skew()
تُميل skew() العنصر على أحد المحورين أو كليهما، ما ينشئ تشوهًا مائلًا أو شبيهًا بالخط المائل في العناصر الكتلية.
<div class="diagonal-section">Section</div>
<span class="italic-badge">Badge</span>skewX() وskewY()
طبّق الميل بشكل مستقل على كل محور:
<div class="banner">Slanted background</div>تطبيق الميل المعاكس على العناصر الفرعية
عند إمالة حاوية، تُمال عناصرها الفرعية أيضًا. طبّق الميل المعاكس على العناصر الفرعية للحفاظ على استقامتها:
<div class="container"><p>Child text stays upright</p></div>تحويل matrix()
تمثّل الدالة matrix(a, b, c, d, tx, ty) الصيغة الرياضية الأساسية للتحويلات الثنائية الأبعاد. وهي تدمج النقل والدوران وتغيير الحجم والميل في عملية مصفوفة واحدة.
<div class="element">Matrix transform</div>matrix3d() للتحويل ثلاثي الأبعاد
توسّع matrix3d() التحويل إلى 16 قيمة للتحكم الكامل في التحويل الأفيني ثلاثي الأبعاد. وعادةً ما تُنشئها JavaScript للتأثيرات ثلاثية الأبعاد المعقدة.
تطبيق عملي على skew: قسم قطري
نمط تصميم شائع — خلفيات الأقسام المائلة:
<div class="section-diagonal"><p>Diagonal background section</p></div>استخدام skew لإبرازات واجهة المستخدم
ينشئ skew تأثيرًا بصريًا ديناميكيًا للشارات وتفاصيل الأشرطة والنصوص المميزة:
<span class="badge"><span>NEW</span></span>المنظور لسياق ثلاثي الأبعاد
تتطلب التحويلات ثلاثية الأبعاد سياق منظور في العنصر الأب. وتحدّد perspective المسافة بين المشاهد ومستوى z=0.
<div class="scene"><div class="card">Card</div></div>ترتيب دوال التحويل
يؤثر ترتيب دوال التحويل في التصريح المدمج في النتيجة. يختلف rotate then translate عن translate then rotate:
<div class="scene-row">
<span class="order-rotate-first">A</span>
<span class="order-translate-first">B</span>
</div>تحريك skew
يمكن تطبيق انتقال على skew لإنشاء تأثيرات أشرطة التمرير وقلب البطاقات. ادمجه مع تحويلات أخرى للحصول على حركة طبيعية:
<div class="card demo-active">Card</div>تحقق سريع
طُبّق على عنصر transform: skewX(-15deg). ماذا يحدث لعناصره النصية الفرعية؟
مراجعة
تنشئ skewX/Y() تشوهات مائلة لفواصل الأقسام الزخرفية وإبرازات واجهة المستخدم الديناميكية. طبّق الميل المعاكس على العناصر الفرعية للحفاظ على استقامة محتواها. تمثّل matrix() الصيغة الرياضية الأساسية التي تدمج جميع التحويلات الثنائية الأبعاد. ويؤثر ترتيب دوال التحويل المتسلسلة تأثيرًا كبيرًا في النتيجة النهائية.
الأسئلة الشائعة
هل درس «تحويلات Skew وMatrix» مجاني؟
نعم — نص درس «تحويلات Skew وMatrix» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «تحويلات Skew وMatrix»؟
أنشئ تشوهات قطرية باستخدام skew() وطبّق مصفوفات تحويل كاملة باستخدام matrix() تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «تحويلات Skew وMatrix»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- Translate وRotate وScale
- تحويلات Skew وMatrix
- أصل التحويل والمنظور
- التحويلات ثلاثية الأبعاد: rotateX وrotateY وtranslateZ