호버 효과 - I

Coddy의 3D 카드 | 프론트엔드 프로젝트 코스 레슨 — 31개 중 30번째.

이 코드는 "parent" 클래스를 가진 요소 내부에 있는 "card" 클래스를 가진 요소의 호버(hover) 효과를 위한 것입니다. 부모 요소 위에 마우스를 올리면 카드가 약간 회전하며, 카드의 여러 부분에 그림자 효과와 변형(translation)이 적용됩니다:

카드 자체는 (1, 1, 0)으로 정의된 축을 중심으로 30도 정도 약간 회전합니다.
카드는 떠 있는 듯한 느낌을 주기 위해 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 카드 | 프론트엔드 프로젝트의 모든 레슨