אפקט ריחוף - I

שיעור 30 מתוך 31 בקורס כרטיס תלת־ממדי | פרויקט Front-end של Coddy.

הקוד הזה יוצר אפקט ריחוף עבור רכיבים עם המחלקה "card" שנמצאים בתוך רכיב עם המחלקה "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>
        <!-- כתבו כאן קוד HTML -->
        <script src="script.js"></script>
    </body>
</html>

כל השיעורים ביחידה כרטיס תלת־ממדי | פרויקט Front-end

תרגלו בעצמכם: Web אונליין