Beispielcode zur Realisierung eines Buchseitenumblättereffekts mit CSS3

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

Artikel empfehlen

So verwenden Sie vw+rem für das mobile Layout

Verwenden Sie immer noch das flexible Rem-Layout?...

Ein Artikel, der Ihnen zeigt, wie Sie Vue-Komponenten erstellen und verwenden

Inhaltsverzeichnis 1. Was ist eine Komponente? 2....

So laden Sie Flash in HTML (2 Implementierungsmethoden)

Erste Methode : CSS Code: Code kopieren Der Code l...

Erläuterung der JavaScript-Funktionssyntax

Inhaltsverzeichnis 1. Gewöhnliche Funktionen 2. P...

Attribute und Verwendung von INS- und DEL-Tags

ins und del wurden in HTML 4.0 eingeführt, um Auto...

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

9 großartige JavaScript-Framework-Skripte zum Zei...

Installieren Sie Centos7 mithilfe einer virtuellen Hyper-V-Maschine

Inhaltsverzeichnis einführen Vorbereiten Systemab...

Detaillierte Erklärung der MySQL 30-Militärregeln

1. Grundlegende Spezifikationen (1) Es muss die I...

React Diff-Algorithmus-Quellcodeanalyse

Inhaltsverzeichnis Einzelner Knoten Diff Einzelel...

Vue verwendet drei Methoden zum Aktualisieren der Seite

Beim Schreiben von Projekten stoßen wir häufig au...

Linux verwendet Shell-Skripte, um historische Protokolldateien regelmäßig zu löschen

1. Dateistruktur des Tools-Verzeichnisses [root@w...

Äußerst detaillierte Freigabe der MySQL-Nutzungsspezifikation

In letzter Zeit waren viele datenbankbezogene Vor...

Ubuntu erstellt Mysql+Keepalived-Hochverfügbarkeitsimplementierung (Dual-Active Hot Standby)

Mysql5.5 Dual-Maschine-Hot-Standby Durchführung I...

Ein Leitfaden zur Optimierung leistungsstarker Websites

Goldene Regeln der Leistung: Nur 10 bis 20 % der ...

So aktivieren Sie die Swoole Loader-Erweiterung auf dem virtuellen Host des Linux-Systems

Besonderer Hinweis: Es wird nur die Swoole-Erweit...