تحقيق الانحراف باستخدام تحويل CSS: تحريف كلا الجانبين

تعرض الصورة المقدمة تأثير انحراف مثير للاهتمام يؤدي إلى زوايا زوايا العنصر. لإعادة إنشاء هذا التأثير باستخدام تحويل CSS، اتبع الخطوات التالية:

تطبيق انحراف المنظور:

لإضافة منظور، استخدم خاصية CSS التالية:

transform: perspective(distance) rotateY(angle);

استبدل "المسافة" بقيمة لتعيين مسافة المنظور (القيم الأعلى تنشئ منظورًا أبعد). استبدل "الزاوية" بزاوية الدوران المطلوبة (45 درجة في هذه الحالة).

مثال CSS:

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

رمز HTML:لتطبيق الانحراف على عنصر، أضف الفئة التالية:

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