كيف تعمل تأثير قلب الصورة عن طريق HTML, CSS.
ثريد 🧵
ثريد 🧵
اول شئ نبدأ بكود HTML:
فيه div وله class سميته “container” وداخل div فيه صورتين أخذتهم من موقع Splash.
فيه div وله class سميته “container” وداخل div فيه صورتين أخذتهم من موقع Splash.
نيجي لكود CSS:
استهدفت كلاس container وعدلت خصائص height, width, position. نحتاج position: relative عشان نقدر نحدد مكان الصور اللي داخله بالضبط.
استهدفت كلاس container وعدلت خصائص height, width, position. نحتاج position: relative عشان نقدر نحدد مكان الصور اللي داخله بالضبط.
هنا استهدفت الصور اللي داخل div اللي له كلاس اسمه “container” وحددت خصائص height, width, position. هنا في position استخدمت absolute عشان تكون الصور داخل container بالضبط.
يتبع..
يتبع..
خاصية transition تحدد سرعة تغيير الصور وخاصية backface-visibility: hidden عشان الصورة الثانية تكون مختفية وتظهر لما نأشر على الصورة الأولى.
اذا كان في اكثر من عنصرين مثل هنا صورتين اقدر استهدف واحد منهم من خلال خاصية nth-child فهنا (1)nth-child يستهدف الصورة الاولى.
الصورة الثانية نحتاج نقلبها رأسياً عن طريق خاصية rotateY: 180deg عشان لما نأشر عليها يكون فيه تأثير وترجع للقيمة الإفتراضية (rotateY: 0deg).
الصورة الثانية نحتاج نقلبها رأسياً عن طريق خاصية rotateY: 180deg عشان لما نأشر عليها يكون فيه تأثير وترجع للقيمة الإفتراضية (rotateY: 0deg).
وبالنسبة للصورة الاولى نحتاج نقبلها رأسياً ايضاً ما نأشر عليها عشان يكون فيه تأثير لما تطلع الصورة الثانية.
كامل الكود:
codepen.io
codepen.io
في نهاية الثريد، لاتنسون المشاركة لإفادة الغير وشكراً💜
جاري تحميل الاقتراحات...