Üzerine Gelme Efekti - I

Coddy'nin 3D Kart | Front-end Projesi kursunda ders 30 / 31.

Bu kod, "parent" sınıfına sahip bir öğenin içindeki "card" sınıfına sahip öğeler üzerindeki bir hover (üzerine gelme) efekti içindir. Üst öğenin üzerine geldiğinizde, kart hafifçe dönecek ve kartın farklı bölümlerine bazı gölge efektleri ve dönüşümler uygulanacaktır:

Kartın kendisi, (1, 1, 0) ile tanımlanan bir eksen etrafında 30 derece hafifçe dönecektir.
Karta, yükseltilmiş bir görünüm kazandırmak için bir box-shadow efekti verilecektir.
Kartın alt bölümündeki sosyal butonlar 50 piksel yukarı hareket edecek ve bir gölge efekti alacaktır.
Logonun ikinci dairesi 60 piksel yukarı hareket edecektir.
Logonun üçüncü dairesi 80 piksel yukarı hareket edecektir.
Logonun dördüncü dairesi 100 piksel yukarı hareket edecektir.

Görev

Kolay

Bu kodu kullanın: (Önemli)

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

Şimdi kartın üzerine gelebilirsiniz.

Kendin dene

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>

Üzerine Gelme Efekti - I

3D Kart | Front-end Projesi bölümündeki tüm dersler