CSS3-Implementierungscode für einfaches Karussellbildschneiden

Umsetzungsideen

Erstellen Sie zunächst einen übergeordneten Container und verwenden Sie zwei ungeordnete Listen, um den übergeordneten Container durch flexibles Layout in zwei Spalten aufzuteilen.
Wenn Sie Bilder in li speichern, können Sie die Bilder in zwei Spalten aufteilen, indem Sie der linken li {background: url('image address') no-repeat; background-size: 200% 100%;} und der rechten li {background-position-x: -300 (die halbe Breite des übergeordneten Containers) px;} zuweisen.
Geben Sie ul das Attribut {ransform-style: preserve-3d; }, um die 3D-Anzeige des Browsers zu aktivieren.
Verwenden Sie untergeordnete und übergeordnete Elemente, um die li-Elemente zusammen zu stapeln: ul{position: relative;} li {position: absolute;}.
Legen Sie die Rotation von li über die Transform-Eigenschaft fest.
Hier können Sie .box:hover>ul { transition: all 5s;transform: rotateX(360deg); } hinzufügen, um den Effekt zu sehen.
Fügen Sie abschließend zwei Schaltflächen hinzu, mit denen Benutzer selbst zwischen Bildern wechseln können.
Beim Klicken ändern Sie einfach den Drehwinkel von ul

  btn1.onclick = ()=>{
            Artikel++;
            sei r = Artikel * 90;
            letf.style.transform = "rotateX(" + r + "Grad)";
            letf.style.transition = "alles 1en";
            right.style.transform = "rotateX(" + r + "Grad)";
            rechts.Stil.Übergang = „alle 1 s .3 s“;
        }
        btn2.onclick = ()=>{
            Artikel--;
            sei r = Artikel * 90;
            letf.style.transform = "rotateX(" + r + "Grad)";
            letf.style.transition = "alles 1en";
            right.style.transform = "rotateX(" + r + "Grad)";
            rechts.Stil.Übergang = „alle 1 s .3 s“;
        }

Zum Schluss fügen Sie alle Codes an. Ich hoffe, es wird Ihnen helfen, das Front-End zu lernen

HTML Quelltext

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Karussellbild ausschneiden</title>
</Kopf>
<Text>
    <div Klasse="Box">
        <ul Klasse="letf">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul Klasse="rechts">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <button id="btn1">Vorherige Seite</button><button id="btn2">Nächste Seite</button>
</body>
</html>

CSS Code

*{
    Rand: 0;
    Polsterung: 0;
}
Körper{
    Perspektive: 800px;
}
.Kasten{
    Anzeige: Flex;
    Breite: 600px;
    Höhe: 350px;
    Rand: 150px automatisch;
}
.box:hover ul li:nth-child(1){
    Übergang: alle 5er;
    transformieren: drehenX(360 Grad);
}
ul{
    biegen: 1;
    Listenstil: keiner;
    Polsterung: 0;
    Rand: 0;
    transform-style: preserve-3d; /* 3D-Darstellung im Browser aktivieren*/
    Position: relativ;
}
li{
    Breite: 100 %;
    Höhe: 100%;
    Position: absolut;
}
li:ntes-Kind(1){
    Hintergrund: URL('../images/9.jpg') keine Wiederholung;
    Hintergrundgröße: 200 % 100 %;
    transformieren: übersetzenZ(175px);

}
li:ntes-Kind(2){
    Hintergrund: URL('../images/10.jpg') keine Wiederholung;
    Hintergrundgröße: 200 % 100 %;
    transformieren: rotierenX(90 Grad) übersetzenZ(175px);
}
li:ntes-Kind(3){
    Hintergrund: URL('../images/11.jpg') keine Wiederholung;
    Hintergrundgröße: 200 % 100 %;
    transformieren: rotierenX(180 Grad) übersetzenZ(175 Pixel);
}
li:ntes-Kind(4){
    Hintergrund: URL('../images/12.jpg') keine Wiederholung;
    Hintergrundgröße: 200 % 100 %;
    transformieren: rotierenX(-90 Grad) übersetzenZ(175px);
}
.rechts li{
    Hintergrundposition-x: -300px;
}

JS-Code

  lass Element = 0;
        let btn1 = document.getElementById('btn1');
        let btn2 = document.getElementById('btn2');
        : Lassen Sie letf = document.querySelector('.letf');
        rechts lassen = document.querySelector('.right')
        btn1.onclick = ()=>{
            Artikel++;
            sei r = Artikel * 90;
            letf.style.transform = "rotateX(" + r + "Grad)";
            letf.style.transition = "alles 1en";
            right.style.transform = "rotateX(" + r + "Grad)";
            rechts.Stil.Übergang = „alle 1 s .3 s“;
        }
        btn2.onclick = ()=>{
            Artikel--;
            sei r = Artikel * 90;
            letf.style.transform = "rotateX(" + r + "Grad)";
            letf.style.transition = "alles 1en";
            right.style.transform = "rotateX(" + r + "Grad)";
            rechts.Stil.Übergang = „alle 1 s .3 s“;
        }

Dies ist das Ende dieses Artikels über den Implementierungscode des einfachen CSS3-Schneidekarussells. Weitere relevante CSS3-Schneidekarussellinhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<: Implementierung des Vue-Top-Tags-Browserverlaufs

>>: Mehrere gängige Methoden zum Übergeben zusätzlicher Parameter beim Senden eines Formulars