تأثير Hovering - I

الدرس 30 من 31 في دورة بطاقة 3D | مشروع Front-end على Coddy.

هذا الكود مخصص لتأثير التحويم (hover effect) على العناصر التي تحمل الفئة "card" والموجودة داخل عنصر يحمل الفئة "parent". عند التحويم فوق العنصر الأب (parent)، ستدور البطاقة قليلاً، وسيتم تطبيق بعض تأثيرات الظل والإزاحة على أجزاء مختلفة من البطاقة:

ستدور البطاقة نفسها قليلاً، بمقدار 30 درجة، حول محور محدد بـ (1, 1, 0).
ستحصل البطاقة على تأثير box-shadow لمنحها مظهراً مرتفعاً.
ستتحرك أزرار التواصل الاجتماعي داخل القسم السفلي من البطاقة للأعلى بمقدار 50 بكسل وستحصل على تأثير ظل.
ستتحرك الدائرة الثانية في الشعار للأعلى بمقدار 60 بكسل.
ستتحرك الدائرة الثالثة في الشعار للأعلى بمقدار 80 بكسل.
ستتحرك الدائرة الرابعة في الشعار للأعلى بمقدار 100 بكسل.

التحدي

سهل

استخدم هذا الكود: (مهم)

.parent:hover .card {
  transform: rotate3d(1, 1, 0, 30deg);
  box-shadow: rgba(5, 71, 17, 0.3) 30px 50px 25px -40px, rgba(5, 71, 17, 0.1) 0px 25px 30px 0px;
}

.parent:hover .card .bottom .social-buttons-container .social-button {
  transform: translate3d(0, 0, 50px);
  box-shadow: rgba(5, 71, 17, 0.2) -5px 20px 10px 0px;
}

.parent:hover .card .logo .circle2 {
  transform: translate3d(0, 0, 60px);
}

.parent:hover .card .logo .circle3 {
  transform: translate3d(0, 0, 80px);
}

.parent:hover .card .logo .circle4 {
  transform: translate3d(0, 0, 100px);
}

الآن يمكنك تمرير الماوس فوق البطاقة.

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>

تأثير Hovering - I

جميع دروس بطاقة 3D | مشروع Front-end