طريقة جعل العنصر يدور عند تمرير الماوس فوقه بواسطة CSS
- مبدأ جعل العنصر يدور
- كود تدوير العنصر عند تمرير الماوس عليه
في هذا المقال ستتعلم كيف تجعل العنصر يدور في مكانه عند تمرير مؤشر الماوس ( Mouse Cursor ) فوقه بخطوات بسيطة جداً.
مبدأ جعل العنصر يدور
بشكل عام لجعل العنصر قابل للدوران يجب أن يكون له حجم بحيث نستطيع تمرير الماوس فوقه و يجب تحديد خلال كم جزء من الثانية نريد أن يدور العنصر خلال نفسه و هذا الأمر نفعله بإضافة الخاصية transition
للعنصر.
الآن لجعله يدور عند تمرير مؤشر الماوس فوقه دورة كاملة حول نفسه ( أي 360 درجة ) فإننا نحتاج فقط إضافة الخاصية transform: rotate(360deg); له فقط في حالة الـ :hover.
كود تدوير العنصر عند تمرير الماوس عليه
في البداية سنقسم التصميم إلى ملفين حتى يكون الشرح واضح و سهل الفهم:
- الملف
index.html
سيحتوي على مكونات الصفحة. - الملف
style.css
سيحتوي على كود التصميم
للحصول على أيقونة يوتيوب، تيليقرام، تويتر و فيسبوك قمنا بتضمين مكتبة الأيقونات Fontawsome
الإصدار 6.1.2.