ホバーエフェクト - I

Coddyの「3Dカード | フロントエンドプロジェクト」コースのレッスン 30/31。

このコードは、"parent"クラスを持つ要素内にある"card"クラスを持つ要素のホバー効果のためのものです。親要素にホバーすると、カードがわずかに回転し、カードのさまざまな部分にシャドウ効果と移動（translation）が適用されます：

カード自体は、(1, 1, 0)で定義された軸を中心に30度わずかに回転します。
カードには、浮き上がったように見せるためのbox-shadow効果が適用されます。
カードの下部セクション内にあるソーシャルボタンは、上に50ピクセル移動し、シャドウ効果が適用されます。
ロゴの2番目の円は、上に60ピクセル移動します。
ロゴの3番目の円は、上に80ピクセル移動します。
ロゴの4番目の円は、上に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カード | フロントエンドプロジェクトのすべてのレッスン