Beispielcode zur Realisierung eines Buchseitenumblättereffekts mit CSS3

Wichtige Erkenntnisse:
1. Beherrschung der CSS3-3D-Animation
2. So lösen Sie die Änderung des Seiteninhalts nach dem Umblättern
3. So bleibt das Buch zentriert

Codeübersicht

<!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>
    .Buch{
        Rand: automatisch;
        Rand oben: 2rem;
        transformieren: übersetzen(0,0);
        Perspektive: 5000px;
        maximale Breite: 40 %;
        Höhe: 800px;
        Position: relativ;
        Übergang: alle 1en leicht;
    }
    .Seite{
        Position: absolut;
        Breite: 100 %;
        Höhe: 100%;
        oben: 0;
        rechts: 0;
        Hintergrundfarbe: rosa;
        Cursor: Zeiger;
        Übergang: alle 1en leicht;
        Transform-Origin: links Mitte;
        Transformationsstil: 3D bewahren;
    }
    .aktiv{
        Z-Index: 1;
    }
    .Seite.umgeblättert{
        transformieren:Y drehen(-180 Grad)
    }
    .hinten,.vorne{
        Textausrichtung: zentriert;
        Position: absolut;
        Rückseitensichtbarkeit: versteckt;
        Breite: 100 %;
        Höhe: 100%;
    }
    .zurück{
        transformieren:Y drehen(180 Grad)
    }
</Stil>
<Text>
    <div Klasse="Buch">
        <div class="Seite aktiv">
            <div class="front">Titelseite</div>
            <div class="zurück">1</div>
        </div>
        <div Klasse="Seite">
            <div Klasse="vorne">2</div>
            <div class="zurück">3</div>
        </div>
        <div Klasse="Seite">
            <div Klasse="vorne">4</div>
            <div class="zurück">5</div>
        </div>
        <div Klasse="Seite">
            <div Klasse="vorne">6</div>
            <div class="back">Schwanz</div>
        </div>
    </div>
</body>
<Skript>
    let Seiten = document.getElementsByClassName('Seite')
    let Buch = document.getElementsByClassName('Buch')[0]
    Funktion bookMove(drect){
        wenn(drect==='rechts'){
            book.style.transform = "übersetzen(50%,0)"
        }sonst wenn(drect==='links'){
            book.style.transform = "übersetzen(0,0)"
        }anders{
            book.style.transform = "übersetzen(100%,0)"
        }
    }
    für (lass i = 0; i < Seitenlänge; i ++) {
        Seiten[i].addEventListener('klicken',()=>{
            wenn (Seiten[i].classList.contains('umgedreht')) {
                Seiten[i].classList.remove('umgedreht')
                Seiten[i].classList.add('aktiv')
                wenn(i===0){
                    bookMove('links')
                }
                wenn (Seiten[i].nextElementSibling!==null){
                    Seiten[i].nextElementSibling.classList.remove('aktiv')
                }anders{
                    bookMove('rechts')
                }
            }anders{
                Seiten[i].classList.add('umgedreht')
                Seiten[i].classList.remove('aktiv')
                wenn(i===0){
                    bookMove('rechts')
                }
                wenn (Seiten[i].nextElementSibling!==null){
                    Seiten[i].nextElementSibling.classList.add('aktiv')
                }anders{
                    bookMove('schließen')
                }
            }
        })
    }
</Skript>
</html>

Analyse der wichtigsten Punkte
Erklärung der CSS3-Animationseigenschaften:
Perspektive: 5000px; Dies ist das perspektivische Attribut, das einfach als das Attribut betrachtet werden kann, das den Effekt „nahe große und ferne kleine“ realisiert. Hierbei ist zu beachten, dass die Perspektive auf das übergeordnete Element des Elements eingestellt werden muss, das einer 3D-Transformation unterzogen wird, da das Element, das einer 3D-Transformation unterzogen wird, den Effekt der perspektivischen Transformation nur mit dem übergeordneten Element als Hintergrund sehen kann.
Übergang:alles 1s-Tempo; hier sind die Übergangseigenschaften, Sie können die Übergangszeit und die angewendete Easing-Funktion einstellen
transform-origin: left center; Mit dieser Eigenschaft kann der Startpunkt der Transformationseigenschaft festgelegt werden, d. h. eine Drehung um die Y-Achse mit der linken Mitte als Punkt
transform-style: preserve-3d; Diese Eigenschaft ermöglicht es den untergeordneten Elementen des Elements mit dieser Eigenschaft, die gleiche Perspektive basierend auf dem übergeordneten Element darzustellen, vorausgesetzt, dass die untergeordneten Elemente ebenfalls einer 3D-Transformation unterzogen werden.

Lösen Sie das Anzeigeproblem des Seiteninhalts:
backface-visibility: hidden; Blendet das um 180 Grad gedrehte Element aus, d. h. die Rückseite ist unsichtbar. Mit dieser Eigenschaft kann Seite 1 um 180 Grad gedreht und dann ausgeblendet werden, während Seite 2, die von -180 Grad auf 0 Grad gedreht ist, angezeigt wird und so der Inhalt des Buches umgeschaltet wird.

So lösen Sie das Problem der Seitenzentrierung in einem Buch:
transform: translate(0,0) Über das Übersetzungsattribut besteht die verbleibende Lösung dieses Problems darin, Klickereignisse mit js hinzuzufügen und den Elementstil zu steuern, um die Seitenumblätteranimation zu realisieren

Dies ist das Ende dieses Artikels über den Beispielcode zur Implementierung des Buchseitenumblättereffekts mit CSS3. Weitere relevante CSS3-Buchseitenumblätterinhalte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<: Umfassende Inventarisierung wichtiger Logdateien in MySQL

>>: 11 Gründe, warum Bootstrap so beliebt ist

Einführung in die grafischen Kompositions- und Satzfunktionen des Webdesigns

Lösung für das Problem des verweigerten Zugriffs für den Benutzer „root“ @ „localhost“ (mit Kennwort: JA) bei der Anmeldung bei MySQL 8.0 unter Win10

Artikel

JavaScript implementiert das Ändern der Farbe einer Webseite über einen Schieberegler

Artikel

Beispielcode zur Realisierung eines Buchseitenumblättereffekts mit CSS3

Einführung in die grafischen Kompositions- und Satzfunktionen des Webdesigns

Vue + Element zur dynamischen Anzeige von Hintergrunddaten zu Optionen

Acht Regeln für effektive Webformulare

Mit Mailto ist das Senden von E-Mails im HTML-Format ganz einfach

Detaillierte Erklärung zur passiven Überprüfung des Überlebensstatus des Servers durch Nginx

CSS-Pickup-Pfeile, Kataloge, Icons Implementierungscode

Beispiel für eine dynamische Sperre der IP-Blacklist von Nginx

Der Unterschied zwischen VOLUME und docker -v in Dockerfile

Lösung für das Problem des verweigerten Zugriffs für den Benutzer „root“ @ „localhost“ (mit Kennwort: JA) bei der Anmeldung bei MySQL 8.0 unter Win10

JavaScript implementiert das Ändern der Farbe einer Webseite über einen Schieberegler

Artikel empfehlen

Verwendung des Node.js-HTTP-Moduls

Implementierung der MySQL5.7 mysqldump-Sicherung und -Wiederherstellung

Der Prozess des Aufbaus einer Lampenarchitektur durch einen Docker-Container

Mehrbenutzer-Lizenzierung für Remotedesktopverbindungen unter Windows Server 2008 R2

So bereinigen Sie regelmäßig Bilder, die über Jenkins „None“ sind

Lösen Sie das Problem, dass MySQL „not in“ verwendet, um Nullwerte einzuschließen

Das vergessene Button-Tag

Vue-Beispielcode zur einfachen Implementierung von virtuellem Scrollen

Lösung für die MySQL-Eingabeaufforderung „Beim Lesen der Kommunikationspakete ist eine Zeitüberschreitung aufgetreten“

Zusammenfassung der Methoden zum Abfragen von MySQL-Benutzerberechtigungen

Beispielcode für Nginx zur Erreichung dynamischer und statischer Trennung

Implementierung einer Fuzzy-Abfrage wie %% in MySQL

Wie viele Ports kann ein Linux-Server maximal öffnen?

Beispiel für die Verwendung von Nginx zur Implementierung eines TCP-Proxys mit Portweiterleitung

Werbefähigkeiten im Baidu Union-Umfeld (grafisches Tutorial)