這篇文章將為大家詳細講解有關css3翻牌翻數(shù)字效果怎么實現(xiàn)，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

在成都網站制作、成都網站建設中從網站色彩、結構布局、欄目設置、關鍵詞群組等細微處著手，突出企業(yè)的產品/服務/品牌，幫助企業(yè)鎖定精準用戶，提高在線咨詢和轉化，使成都網站營銷成為有效果、有回報的無錫營銷推廣。創(chuàng)新互聯(lián)專業(yè)成都網站建設十年了，客戶滿意度97.8%，歡迎成都創(chuàng)新互聯(lián)客戶聯(lián)系。

效果圖如下：

沒有具體說做什么效果，但是想著純數(shù)字轉換太簡單了，然后就順手做了一個翻牌的效果。

效果預覽，新窗口打開：https://codepen.io/andy-js/pen/ExaGxaL

首先做一些頁面布局：

<ul></ul>

 body{background: #000;}
     ul{
         list-style: none;
         margin:100px 0;
         display: flex;
         justify-content:center;
         line-height: 56px;
         height:56px;
         font-size: 39.6px;
         color: #FFFFFF;
         transform-style:preserve-3d;
         perspective:1000px;
     }
     li{
        height:56px;
        margin:0 10px;
        background:none;
        width:16px;
        position: relative;
     }
     .num{
        width:46px;
        transform-style:preserve-3d;
        perspective:1000px;
        transform:rotateY(0deg);
        transition: 1s all ease;
    }
    p{
        height:56px;
        width:46px;
        text-align: center;
        background: #EC2C5C;
        border-radius: 2.57px;
        position: absolute;
    }
    
    p:nth-child(2){
        transform: scalex(-1) translateZ(-1px);
    }

然后通過動態(tài)插入，模擬了這么一個效果
利用了transition來做的動畫
利用transform:rotateY來做的翻轉
在翻轉之前先將另一個數(shù)字scalex左右鏡像之后translateZ(-1px)移動到另一個數(shù)字的后面，這樣翻轉過來就能看到鏡像的數(shù)字
不是很完善，還有很多可以改進的地方
全部代碼如下：

<script>
var number=9999993,
    numArr=addComma(number),
    aNum=[],
    oUl=document.getElementsByTagName('ul')[0];
for(let i=0;i<numArr.length;i++){
    let li=document.createElement('li');
    oUl.appendChild(li);
    if(numArr[i]==',')
    li.innerHTML=',';
    else
    li.innerHTML='<p>'+numArr[i]+'</p><p></p>',
    li.className='num',
    li.deg=0,
    aNum.push(li);
};

setInterval(function(){
    let changeNum=number+1+'';
    let changeArr=addComma(changeNum),
        difference=changeArr.length-numArr.length;
    if(difference){
        for(let i=0;i<difference;i++){
            let li=document.createElement('li');
            oUl.insertBefore(li,oUl.children[0]);
            if(changeArr[i]==',')
            li.innerHTML=',';
            else
            li.innerHTML='<p>'+changeArr[i]+'</p><p></p>',
            li.className='num',
            li.deg=0,
            aNum.unshift(li);
        };
    };
    number+='';
    for(let i=changeNum.length-number.length;i<changeNum.length;i++){
        if(changeNum[i]==number[i])continue;
        let deg=aNum[i].deg;
        aNum[i].deg=deg=deg+180;
        let index=(deg/180)%2;
        aNum[i].children[index].innerHTML=changeNum[i];
        aNum[i].style.transform='rotateY('+deg+'deg)';
    };
    number=Number(changeNum);
    numArr=changeArr;
},2000);


function addComma(num){    //每隔三位數(shù)加一個豆號
    return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
};
</script>

關于“css3翻牌翻數(shù)字效果怎么實現(xiàn)”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

本文名稱：css3翻牌翻數(shù)字效果怎么實現(xiàn)
地址分享：http://chinadenli.net/article20/pigsco.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供電子商務、企業(yè)建站、動態(tài)網站、自適應網站、云服務器、搜索引擎優(yōu)化

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)