Эффект наведения - I

Урок 30 из 31 курса 3D-карточка | 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>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>

Эффект наведения - I

Все уроки раздела 3D-карточка | Front-end проект