كيفية إنشاء بطاقة Flip Card ثلاثية الأبعاد على Hover باستخدام HTML و CSS فقط

ستتعلم اليوم في هذه المدونة كيفية إنشاء بطاقة Flip Card ثلاثية الأبعاد على Hover باستخدام HTML و CSS فقط

مرحبًا أيها القراء ، ستتعلم اليوم في هذه المدونة كيفية إنشاء بطاقة Flip Card ثلاثية الأبعاد على Hover باستخدام HTML و CSS فقط.

 

البطاقة عبارة عن مربع صغير مستطيل به صور ونص. إنها نقطة دخول للمستخدمين لمعرفة المزيد من التفاصيل. للحفاظ على قابلية استخدام واجهة موقع الويب ، يعد نمط واجهة مستخدم البطاقة اختيارًا افتراضيًا. نظرًا لسهولة استخدام البطاقات ، يمكنها أيضًا إظهار المحتوى الذي يحتوي على تفاصيل مختلفة.

 

في هذا البرنامج (3D Flip Card on Hover) ، في البداية ، على صفحة الويب ، يوجد جزء أمامي من البطاقة والذي يعني الصورة ، وعندما تحوم فوق تلك الصورة ، تنقلب هذه البطاقة أو تدور بنمط ثلاثي الأبعاد وتظهر لك الجزء الخلفي من البطاقة. وفي الجزء الخلفي من البطاقة ، توجد صورة للملف الشخصي ، وعنوان ، وبعض أيقونات الوسائط الاجتماعية.

 

إذا كنت تشعر بصعوبة في فهم ما أقوله. يمكنك مشاهدة فيديو تعليمي كامل على هذا البرنامج (3D Flip Card on Hover).

 

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

 

إذا كنت تحب هذا البرنامج (Card with 3D Flip Animation أو Effect) وترغب في الحصول على أكواد المصدر. يمكنك بسهولة الحصول على الأكواد المصدرية لهذا البرنامج. للحصول على أكواد المصدر ، تحتاج فقط إلى التمرير لأسفل. يمكنك استخدام هذه الرسوم المتحركة ثلاثية الأبعاد على صور موقع الويب الخاص بك أو بطاقات المشروع.

 

3D Flip Card على Hover Animation أو Effect

لإنشاء هذا البرنامج (Card with 3D Flip Animation). أولاً ، تحتاج إلى إنشاء ملفين ، أحدهما ملف HTML والآخر هو ملف CSS. بعد إنشاء هذه الملفات ، قم فقط بلصق الأكواد التالية في ملفك.

الملفات

ما هو رد فعلك؟

like

dislike

love

funny

angry

sad

wow