Beispielcode zur Implementierung eines 3D-Bucheffekts mit CSS

Schauen wir uns zunächst ohne Umschweife die Renderings an

Bildbeschreibung hier einfügen

Der Quellcode lautet wie folgt

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
</Kopf>
<Stil>
    *{
        Rand: 0;
        Polsterung: 0;
    }
    Körper{
        Anzeige: Flex;
        Elemente ausrichten: zentrieren;
        Inhalt ausrichten: zentriert;
        Breite: 100 %;
        Mindesthöhe: 100vh;
        Hintergrund: #333333;
        Hintergrundgröße: Abdeckung;
    }
    .Buch{
        Breite: 400px;
        Höhe: 600px;
        Position: relativ;
        Hintergrundfarbe: #ffffff;
        transformieren: drehen (-37,5 Grad) schrägX (10 Grad);
        Boxschatten: -35px 35px 50px rgb(0,0, 0, 1);
        Übergang: 0,5 s;
        /* Der Cursor wird als Zeiger (eine Hand) dargestellt, der auf einen Link hinweist */
        Cursor: Zeiger;
    }
    .Buch:hover{
        /* Drehen Definiert eine 2D-Drehung und gibt den Winkel im Parameter an. */
        /* skewX() definiert eine 2D-Schieftransformation entlang der X-Achse.
            translate(x,y) definiert eine 2D-Verschiebung.
          */
        transformieren: drehen (-37,5 Grad) schrägstellen (10 Grad) verschieben (20px, -20px);
        /* box-shadow fügt einer Box einen oder mehrere Schatten hinzu */
        Boxschatten: -50px 50px 100px rgba (0,0,0,1);
    }
    /* Pseudoelemente müssen mit Inhalt verwendet werden und müssen mindestens leer sein*/
    .book::before{
        Inhalt:'';
        Höhe: 100 %;
        Breite: 30px;
        Hintergrund: rot;
        Position: absolut;
        oben: 0;
        links: 0;
        transformieren: schrägY(-45 Grad) übersetzen(-30px,-15px); 
        Box-Schatten: Einschub -10px 0 20px raba(0,0,0,0,2);
        Hintergrund: url(cofe.jpg);
    }
    .book::after{
            Inhalt: '';
            Höhe: 30px;
            Breite: 100 %;
            Hintergrund: #fff;
            Position: absolut;
            unten: 0;
            links: 0;
            transformieren: skewX(-45 Grad) übersetzen(15px,30px);
            Hintergrund: url(cofe.jpg);

    }
    .Buch h2{
        Position: absolut;
        unten: 100px;
        links: 10px;
        Schriftgröße: 5em;
        Zeilenhöhe: 1em;
        Farbe: RGB (110, 21, 21);
    }
    .Buch h2 span{
        Hintergrundbild: URL (cofe.jpg);
        Hintergrundanhang: behoben;
        -webkit-background-clip: Text;
        -webkit-text-fill-color: transparent;
    }
    .Buch .Schreibe ich{
        Schriftstärke: 700;
    }
    .Buch .Cover{
        Position: absolut;
        oben: 0;
        links: 0;
        Breite: 100 %;
        Höhe: 70%;
        Hintergrundbild: URL (cofe.jpg);
        Hintergrundgröße: Abdeckung;
    }


</Stil>


<Text>
    <div Klasse="Buch">
        <div Klasse="Abdeckung"></div>
        <h2>Buch <span>Javascript</span></h2>
        <span class="wirte">von Fans geschrieben</span>
    </div>
</body>
</html>

Zusammenfassen

Dies ist das Ende dieses Artikels darüber, wie man mit CSS einen 3D-Bucheffekt erzielt. Weitere relevante CSS-3D-Buchinhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<: Exquisiter Snake-Implementierungsprozess in JavaScript

>>: Analyse und Meinungen zum Design der Produktdetailseite auf der Taobao-Website (Bild)