Hiệu ứng khi di chuột - I

Bài học 30 trên 31 trong khóa học Thẻ 3D | Dự án front-end của Coddy.

Đoạn code này tạo hiệu ứng di chuột cho các phần tử có lớp "card" nằm bên trong một phần tử có lớp "parent". Khi bạn di chuột lên phần tử cha, thẻ sẽ xoay nhẹ, đồng thời các hiệu ứng đổ bóng và dịch chuyển sẽ được áp dụng cho những phần khác nhau của thẻ:

Bản thân thẻ sẽ xoay nhẹ 30 độ quanh trục được xác định bởi (1, 1, 0).
Thẻ sẽ có hiệu ứng đổ bóng hộp để trông như được nâng lên.
Các nút mạng xã hội bên trong phần dưới cùng của thẻ sẽ dịch lên 50 pixel và có hiệu ứng đổ bóng.
Vòng tròn thứ hai của logo sẽ dịch lên 60 pixel.
Vòng tròn thứ ba của logo sẽ dịch lên 80 pixel.
Vòng tròn thứ tư của logo sẽ dịch lên 100 pixel.

Thử thách

Dễ

Sử dụng đoạn code này: (Important)

.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);
}

Bây giờ bạn có thể di chuột lên thẻ.

Tự làm thử

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Viết code HTML tại đây -->
        <script src="script.js"></script>
    </body>
</html>

Tất cả bài học trong Thẻ 3D | Dự án front-end

Tự luyện tập: Playground Web