مولّد CSS Transform

ما هو مولّد تحويلات CSS؟

يجمع دوال CSS transform بمنزلقات: translate وrotate وscale وskew ثنائية البعد، وperspective وrotateX وrotateY وtranslateZ ثلاثية الأبعاد. يعرض مخطط متقطع في المعاينة الموضع الأصلي وتشير نقطة حمراء إلى أصل التحويل.

كيفية استخدام مولّد تحويلات CSS

1. اختر إعداداً مسبقاً (3D tilt أو Flip أو Slanted أو Zoom أو 3D card) أو ابدأ من بلا.
2. اضبط الإزاحة X/Y والتدوير والتحجيم X/Y والإمالة X/Y ضمن التحويلات ثنائية البعد.
3. اضبط المنظور والتدوير X والتدوير Y والإزاحة Z ضمن التحويلات ثلاثية الأبعاد.
4. اختر أصل التحويل من القائمة أو اضبط الموضع X/Y.
5. انسخ كود CSS.

مثال

Move X 20px, Rotate 45°, Scale X 1.5, Scale Y 1.5

transform: translate(20px, 0) rotate(45deg) scale(1.5);

متى تستخدم مولّد تحويلات CSS

استخدمه لتأثيرات التمرير وقلب البطاقات وعروض ثلاثية الأبعاد مائلة وإزاحات التموضع الدقيقة. لا تؤثر التحويلات في التخطيط (فالعناصر المحيطة لا تتحرك)؛ ولتغيير التخطيط استخدم الهوامش أو flexbox أو grid. وادمجه مع مولّد CSS Animation لتحريك التحويلات.

كيف يعمل مولّد تحويلات CSS

تُكتب الدوال فقط عندما لا تكون محايدة، بهذا الترتيب: perspective() وtranslate() وtranslateZ() وrotateX() وrotateY() وrotate() وscale() وskew(). تُطبَّق التحويلات من اليمين إلى اليسار نسبةً إلى العنصر، لذا يغيّر الترتيب النتيجة؛ ويجب أن يأتي perspective() أولاً ليؤثر في الدوال ثلاثية الأبعاد بعده. يُكتب التحجيم المتساوي في X/Y كـ scale(n) واحدة. ولا يُخرج transform-origin إلا إذا اختلف عن المركز الافتراضي (50% 50%).

حالات الاستخدام الشائعة

• ✓ بطاقات منتجات مائلة ثلاثية الأبعاد
• ✓ تأثيرات قلب البطاقة بـ rotateY(180deg)
• ✓ تكبير الصور عند التمرير
• ✓ تسميات أقسام مائلة بـ skew
• ✓ حيل التوسيط بـ translate(-50%, -50%)

الأسئلة الشائعة

استكشف المزيد من الفئات