عرض مشاركة واحدة
  #1  
قديم 05-29-2021, 03:19 AM
الصورة الرمزية الادارة كريم
الادارة كريم 
مشرف سابق
 
تاريخ التسجيل: May 2021
الدولة: مصر
المشاركات: 397
معدل تقييم المستوى: 18
الادارة كريم is a splendid one to beholdالادارة كريم is a splendid one to beholdالادارة كريم is a splendid one to beholdالادارة كريم is a splendid one to beholdالادارة كريم is a splendid one to beholdالادارة كريم is a splendid one to beholdالادارة كريم is a splendid one to behold


افتراضي أدوات وإضافات تصميم المواقع | تأثير Flipping Cards 3D

 

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته

في هذا الدرس من سلسلة أدوات وإضافات تصميم المواقع ، سنشرح بعون الله طريقة إنشاء البطاقات المتحركة التي تدور بشكل ثلاثي الأبعاد ، 3D Flipping Cards ، التي نراها في كثير من المواقع والتي تستخدم في تصميمها خصائص من لغة CSS3 .



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




نمر مباشرة نحو التفاصيل ، لإنشاء البطاقات الواضحة في الصورة أعلاه كتبنا كود html التالي :


الفكرة ببساطة هي إنشاء ديف block ، وبداخله ديف واجهة front وديف خلفية back ، داخل كل واحد منها محتوى مختلف عن الثاني ، وبعد ذلك تكرار هذا الكود أكثر من مرة حسب عدد البطاقات التي نريد إنشاءها .


وبعد ذلك بدء CSS بتنسيق block والخواص المشتركة بين front و back ، واستخدمنا هنا خاصية backface-visibility وأعطيناها القيمة hidden حتى لا يظهر الجانب الخلفي للديف عندما نقلبه لاحقا والذي سيظهر مكانه هو الديف الآخر ، بمعنى عندما نقلب front يظهر back ولا يظهر الجانب الخلفي ل front والعكس صحيح . كما استخدمنا خاصيتي transition لكليهما حتى يكون الدوران ناعما وجميلا وسيزداد جمالا بخاصية perspective التي وضعناها للديف block :


تنسيق كل من front و back على حدا في الحالة العادية وفي حالة Hover ، والمهم هنا هو خاصية transform rotateY ، وهي التي تسمح للديف بالدوران أفقيا حول محوره :


وبعد ذلك تنسيق المحتوى الذي وضعناه في كل من back و front ، وهذا القسم من التنسيق هو خاص بالمحتوى التجريبي الذي وضعناه ، بإمكانك الإستغناء عنه لأنك ستضع محتوى يناسبك وتنسقه بنفسك :


يمكنك تحميل ملفات الإضافة


الموضوع الأصلي : أدوات وإضافات تصميم المواقع | تأثير Flipping Cards 3D || الكاتب : الادارة كريم || المصدر : منتدى مجمع التطوير

 

رد مع اقتباس