Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing

طريقة جعل العنصر يدور عند تمرير الماوس فوقه بواسطة 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;
}
/* هنا قمنا بإزالة أي هامش خارجي أو داخلي قد يضيفه المتصفح للعناصر و كذلك قمنا بجعل الهوامش الحدود يتم حسابها كجزء من حجم العنصر */ * { 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>
<!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>
تجربة الكود
آخر تحديث في 06-01-2024

الكاتب

محمد هرموش

مؤسس و مطور موقع هرمش. مهتم بنشر كل ما أعرفه في مجال البرمجة و الأنظمة و الشبكات.

harmash.com

تعليقات

لا يوجد أي تعليق بعد

أضف تعليق

يجب تسجيل الدخول حتى تتمكن من إضافة تعليق أو رد.

الدورات

أدوات مساعدة

أقسام الموقع

دورات
مقالات كتب مشاريع أسئلة