CSS3-Flip-Card-Nummern-Beispielcode

<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);
    }

<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>