بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
في هذا الدرس من سلسلة أدوات وإضافات
تصميم المواقع ، سنشرح بعون الله طريقة إنشاء
البطاقات المتحركة التي تدور بشكل ثلاثي الأبعاد ،
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 ، وهذا القسم من التنسيق هو خاص بالمحتوى التجريبي الذي وضعناه ، بإمكانك الإستغناء عنه لأنك ستضع محتوى يناسبك وتنسقه بنفسك :
يمكنك تحميل ملفات الإضافة
