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

Tutorial zur Installation von VMWare15.5 unter Linux

Beispielcode zur Realisierung eines Buchseitenumblättereffekts mit CSS3

Tutorial zur Installation von VMWare15.5 unter Linux

Detailliertes Tutorial zur Neuinstallation von Python 3.6.6 auf CentOS 7.5

Grundlegende Operationen an unsichtbaren Spalten in MySQL 8.0

Keine chinesische Spezialität: Webentwicklung unter kulturellen Unterschieden

Führen Sie die Schritte zur Installation von MySQL 8.0.x unter Linux aus.

Zwei Methoden zum Wiederherstellen von MySQL-Daten

Einführung in die Verwendung von em im elastischen Layout in CSS3: Wie viele Pixel sind 1em?

Beispiele für die Verwendung von HTML-Metadaten

Implementierungsskript für geplante Datenbanksicherung unter Linux

So sichern Sie MySQL-Kontoinformationen elegant

Artikel empfehlen

Analyse des Verwendungsbeispiels für den Common Table Expression CTE in mysql8

9 großartige JavaScript-Framework-Skripte zum Zeichnen von Diagrammen im Web

Techniken zur Optimierung von MySQL-Paging-Abfragen

Was bei der Migration von MySQL auf 8.0 zu beachten ist (Zusammenfassung)

calc(), um einen Vollbild-Hintergrundinhalt mit fester Breite zu erreichen

Detaillierte Erläuterung der Nginx-Frontend-Verteilungsmethode basierend auf $remote_addr

Zwei spezielle Werte in CSS werden verwendet, um die Vererbungs- und Initialisierungsmethoden der Kaskade zu steuern

HTML-Tabellen-Tag-Tutorial (17): Tabellentitel vertikales Ausrichtungsattribut VALIGN

JavaScript zum Erzielen eines Texterweiterungs- und -reduzierungseffekts

So implementieren Sie die Seiten-Screenshot-Funktion in JS

Details zum Lazy Loading im Vue-Routing

So erstellen Sie eine kontinuierliche Integrationsumgebung mit Jenkins+Maven+Git auf CentOS7

WeChat-Applet + ECharts zur Realisierung eines dynamischen Aktualisierungsprozesses

So konfigurieren Sie den Tomcat-Server für Eclipse und IDEA

Tutorial zur Tomcat-Konfiguration für Nginx/Httpd-Lastausgleich