طريقة جعل العنصر يدور عند تمرير الماوس فوقه بواسطة CSS

مبدأ جعل العنصر يدور
كود تدوير العنصر عند تمرير الماوس عليه

في هذا المقال ستتعلم كيف تجعل العنصر يدور في مكانه عند تمرير مؤشر الماوس ( Mouse Cursor ) فوقه بخطوات بسيطة جداً.

مبدأ جعل العنصر يدور

بشكل عام لجعل العنصر قابل للدوران يجب أن يكون له حجم بحيث نستطيع تمرير الماوس فوقه و يجب تحديد خلال كم جزء من الثانية نريد أن يدور العنصر خلال نفسه و هذا الأمر نفعله بإضافة الخاصية transition للعنصر.

الآن لجعله يدور عند تمرير مؤشر الماوس فوقه دورة كاملة حول نفسه ( أي 360 درجة ) فإننا نحتاج فقط إضافة الخاصية transform: rotate(360deg); له فقط في حالة الـ :hover.

كود تدوير العنصر عند تمرير الماوس عليه

في البداية سنقسم التصميم إلى ملفين حتى يكون الشرح واضح و سهل الفهم:

الملف index.html سيحتوي على مكونات الصفحة.
الملف style.css سيحتوي على كود التصميم

للحصول على أيقونة يوتيوب، تيليقرام، تويتر و فيسبوك قمنا بتضمين مكتبة الأيقونات Fontawsome الإصدار 6.1.2.

الكود

style.css

/* هنا قمنا بإزالة أي هامش خارجي أو داخلي قد يضيفه المتصفح للعناصر
 و كذلك قمنا بجعل الهوامش الحدود يتم حسابها كجزء من حجم العنصر */
 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* هذا الكلاس يجعل الأيقونات تظهر في الوسط و يضمن أن
 تظل بعيدة عن جوانب الصفحة من كل الجهات بمقدار 20 بكسل */
.web-links {
    text-align: center;
    padding: 20px;
}

/* يتبعد web-links موضوع في الكلاس <a> هنا جعلنا أي عنصر 
 من اليسار و الأسفل بمقدار 5 بكسل حتى لا يظهروا بشكل متلاصق 
 كذلك جعلنا المؤثرات التي سنضيفها عليهم تتنفذ خلال 0.3 ثانية */
.web-links a {
    text-decoration: none;
    margin-left: 5px;
    margin-bottom: 5px;
    display: inline-block;
    cursor: pointer;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

/* هنا جعلنا العنصر يدور دورة كاملة حول نفسه عند تمرير
 مؤشر الماوس فوقه و هذه العملية ستتنفذ خلال 0.3 ثانية */
.web-links a:hover {
    transform: rotate(360deg);
}

/* هنا جعلنا الأيقونات بيضاء و خلفيتها رمادية و تظهر بشكل دائري
 و كذلك حددنا طولها و عرضها بمقدار 38 بيكسل لتأخذ حجم مربع 
 و من ثم جعلنا حدودها منحنية بنسبة 50% لتظهر بشكل دائري */
.web-links a i {
    background: #2f2f2f;
    height: 38px;
    line-height: 38px;
    width: 38px;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    font-size: 17px;
    box-shadow: 0 0 1px #555 inset;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- الأيقونات المستخدمة-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- ملف التصميم -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="web-links">
        <a target="_blank" href="https://twitter.com/harmashcom">
            <i class="fab fa-twitter"></i>
        </a>
        <a target="_blank" href="https://www.facebook.com/harmashcom">
            <i class="fab fa-facebook-f"></i>
        </a>
        <a target="_blank" href="https://www.youtube.com/c/harmashcom">
            <i class="fab fa-youtube"></i>
        </a>
        <a target="_blank" href="https://telegram.me/harmashcom">
            <i class="fa-solid fa-paper-plane"></i>
        </a>
    </div>
</body>
</html>