إنشاء تأثير منحرف باستخدام تحويلات CSS

في عالم تصميم الويب، توفر تحويلات CSS أداة قوية لمعالجة العناصر في الفضاء. أحد التأثيرات المثيرة للاهتمام التي يمكنك تحقيقها هو الانحراف، مما يمنح العنصر مظهرًا مائلًا أو مشوهًا.

تحقيق انحراف الزاوية باستخدام تحويلات CSS

السؤال الذي يطرح نفسه: كيف هل قمت بإنشاء تأثير منحرف مثل المثال الموضح، حيث يتم إمالة كلا الزاويتين؟

الإجابة:

لتحقيق هذا التأثير، يمكنك استخدام خاصية التحويل جنبًا إلى جنب مع المنظور والتدويرY. إليك مثال:

.red.box {
  background-color: red;
  transform: perspective(600px) rotateY(45deg);
}

شرح:

المنظور: يحدد نقطة التلاشي للتحول، وخلق تأثير ثلاثي الأبعاد. القيمة الأعلى تحاكي مسافة أكبر.
• rotateY: لتدوير العنصر على طول المحور Y، مما يمنحه مظهرًا منحرفًا. تدور القيمة الموجبة في اتجاه عقارب الساعة والعكس.