CSS3-Flip-Card-Nummern-Beispielcode

Ich habe heute eine Aufgabe von der Firma erhalten und das Wirkungsdiagramm sieht wie folgt aus:

Ich habe nicht angegeben, welchen Effekt ich erzielen wollte, aber ich dachte, eine rein digitale Konvertierung wäre zu einfach, also habe ich nur einen Kartenumdreheffekt erzeugt.

Effektvorschau, öffnet in einem neuen Fenster: https://codepen.io/andy-js/pen/ExaGxaL

Nehmen Sie zunächst das Seitenlayout vor:

<ul></ul>

 Körper{Hintergrund: #000;}
     ul{
         Listenstil: keiner;
         Rand: 100px 0;
         Anzeige: Flex;
         Inhalt ausrichten: zentriert;
         Zeilenhöhe: 56px;
         Höhe: 56px;
         Schriftgröße: 39,6px;
         Farbe: #FFFFFF;
         Transformationsstil: 3D beibehalten;
         Perspektive: 1000px;
     }
     li{
        Höhe: 56px;
        Rand: 0 10px;
        Hintergrund: keiner;
        Breite: 16px;
        Position: relativ;
     }
     .Nummer{
        Breite: 46px;
        Transformationsstil: 3D beibehalten;
        Perspektive: 1000px;
        transformieren:Y drehen(0 Grad);
        Übergang: 1s ganz leicht;
    }
    P{
        Höhe: 56px;
        Breite: 46px;
        Textausrichtung: zentriert;
        Hintergrund: #EC2C5C;
        Rahmenradius: 2,57px;
        Position: absolut;
    }
    
    p:ntes-Kind(2){
        transformieren: scalex(-1) übersetzenZ(-1px);
    }

Dann wird durch dynamisches Einfügen ein solcher Effekt simuliert. Übergang wird verwendet, um die Animation zu erstellen. Transform:rotateY wird verwendet, um den Flip zu erstellen. Vor dem Flip wird eine andere Zahl scalex links und rechts gespiegelt und dann wird translateZ (-1px) hinter die andere Zahl verschoben. Auf diese Weise können Sie die gespiegelte Zahl sehen, wenn Sie sie umdrehen. Es ist nicht perfekt und es gibt noch viele Stellen, die verbessert werden können. Der vollständige Code lautet wie folgt:

<Skript>
Variablennummer = 9999993,
    numArr=addComma(Zahl),
    eine Zahl = [],
    oUl=document.getElementsByTagName('ul')[0];
für (lass i = 0; i <AnzahlArr.Länge; i++) {
    Lassen Sie li = document.createElement('li');
    oUl.appendChild(li);
    wenn(numArr[i]==',')
    li.innerHTML=',';
    anders
    li.innerHTML='<p>'+numArr[i]+'</p><p></p>',
    li.className='num',
    li.deg=0,
    aNum.push(li);
};

setzeIntervall(Funktion(){
    sei changeNum=Zahl+1+'';
    sei changeArr = addComma(changeNum),
        Differenz=Änderungsarr.Länge-AnzahlArr.Länge;
    wenn(Differenz){
        für (lass i = 0; i < Differenz; i++) {
            Lassen Sie li = document.createElement('li');
            oUl.insertBefore(li,oUl.children[0]);
            wenn(changeArr[i]==',')
            li.innerHTML=',';
            anders
            li.innerHTML='<p>'+changeArr[i]+'</p><p></p>',
            li.className='num',
            li.deg=0,
            aNum.unshift(li);
        };
    };
    Zahl+='';
    für (let i=changeNum.length-number.length;i<changeNum.length;i++){
        wenn (changeNum[i]==number[i])weiter;
        sei Grad = aNum[i].deg;
        eineZahl[i].deg=deg=deg+180;
        sei Index = (Grad/180) %2;
        eineAnzahl[i].children[index].innerHTML=änderAnzahl[i];
        aNum[i].style.transform='rotateY('+deg+'deg)';
    };
    Nummer=Nummer(Nummer ändern);
    AnzahlAnordnung=ÄnderungAnordnung;
},2000);


function addComma(num){ //Für alle drei Ziffern eine Bean-Nummer hinzufügen return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
};
</Skript>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<: Einführung in die Verwendung benutzerdefinierter Datenattribute in HTML- und Plug-In-Anwendungen

>>: Semantik: Ist HTML/XHTML wirklich standardkonform?