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

Tutorial-Diagramm zur VMware-Installation des Centos8-Systems (Befehlszeilenmodus)

Inhaltsverzeichnis 1. Software- und Systemabbild ...

Detaillierte Erläuterung des Nginx-Strombegrenzungsmoduls in der Nginx-Quellcode-Recherche

Inhaltsverzeichnis 1. Strombegrenzungsalgorithmus...

Beispielanalyse zur Metadatenextraktion von MySQL und Oracle

Inhaltsverzeichnis Vorwort Was sind Metadaten? Ad...

Allgemeines Startskriptbeispiel für ein Linux-Java-Programm

Allerdings ist die Häufigkeit des Shell-Starts se...

Verwenden Sie semantische Tags, um Ihr HTML kompatibel mit IE6,7,8 zu schreiben

HTML5 fügt weitere semantische Tags hinzu, wie et...

So verwenden Sie JS zum Parsen des Excel-Inhalts in der Zwischenablage

Inhaltsverzeichnis Vorwort 1. Ereignisse und Zwis...

Eine gängige Technik zur Implementierung von Dreiecken mit CSS (mehrere Methoden)

In manchen Vorstellungsgesprächen werden häufig F...

Neue Funktionen in MySQL 8.0 - Einführung in die Verwendung des Management-Ports

Inhaltsverzeichnis Vorwort Verbindungsverwaltung ...

Detaillierte Erläuterung des Falls, in dem eine untergeordnete Vue-Komponente die Methode der übergeordneten Komponente aufruft

1. Rufen Sie die Methode der übergeordneten Kompo...

Mehrere Navigationsrichtungen, die in Zukunft beliebt sein werden

<br />Dies ist nicht nur ein Zeitalter der I...

Ein grafisches Tutorial zur Installation des Redhat 8.0-Systems (ein Muss für Anfänger)

Inhaltsverzeichnis 1. Einleitung 2. Installation ...

Vue implementiert die Methode zur Anzeige des Prozentsatzes der Echart-Kreisdiagrammlegende

Dieser Artikel stellt hauptsächlich den Kreisdiag...

Detaillierte Erklärung der Lösung für CSS-Opazität untergeordneter Elemente, um die Transparenz übergeordneter Elemente zu übernehmen

Beim Schreiben der Projektseite stieß ich auf das...

Einführung in die neuen Funktionen von MySQL 8.0.11

MySQL 8.0 für Windows v8.0.11 offizielle kostenlo...

MySQL verwendet benutzerdefinierte Funktionen, um die übergeordnete ID oder untergeordnete ID rekursiv abzufragen

Hintergrund: Wenn es in MySQL eine begrenzte Eben...