3D Flip Card on Hover using HTML and CSS
السلام عليكم ، سنقوم اليوم في هذه المقالة بإنشاء Flip Card ثلاثية الأبعاد بأستخدام HTML و CSS فقط.
ببساطة يمكننا أن نفهم أن بطاقة الوجه ثلاثية الأبعاد تعني بطاقة 360 درجة في شكل ثلاثي الأبعاد وتحتوي على بعض المعلومات. في بطاقة الوجه هذه ، يمكن للبرنامج رؤية المنظر الخلفي للبطاقة.
كما ترى في الصورة المحددة على صفحة الويب. يوجد على الجانب الأمامي صورة واحدة فقط وعلى ظهر البطاقة الاسم و والظيفة وصورة صغيرة .
في البداية ، كان الجانب الأمامي فقط من البطاقة مرئيًا ، ثم حركنا البطاقة التي تقلبها بسلاسة ويظهر الوجه الخلفي للبطاقة ويختفي الوجه الأمامي.
سوف تجد الكود حاهز في نهاية المقالة
فيديو انشاء البطاقة
كما رأيتم في الفيديو. في البداية ، لا يمكننا رؤية سوى الوجه الأمامي لهذه البطاقة والوجه الخلفي مخفي ، عندما نقوم بالوقوف على البطاقة بالماوس يصبح البطاقة مقلوبة ووجهها الخلفي مرئي ويختفي الوجه الأمامي.
عندما حركنا الماوس فوق أيقونات التواصل الاجتماعي ، تغير لونها وخلفيتها وظهرت الحدود الدائرية .
إذا كنت تجيد لغة HTML و CSS ، فيمكنك بسهولة إنشاء بطاقة الوجه التعريفي هذه .
أيضًا إذا كان لديك معرفة بجافا سكريبت ، يمكنك إضافة المزيد من الوظائف كما يحلو لك.
اذا كنت تجد صعوبة في انشاء البطاقة سوف تجد الكود جاهز في اخر المقالة
إرسال تعليق