css3翻牌翻数字效果怎么实现

这篇文章将为大家详细讲解有关css3翻牌翻数字效果怎么实现，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

效果图如下：

没有具体说做什么效果，但是想着纯数字转换太简单了，然后就顺手做了一个翻牌的效果。

效果预览，新窗口打开：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);    }

然后通过动态插入，模拟了这么一个效果
利用了transition来做的动画
利用transform:rotateY来做的翻转
在翻转之前先将另一个数字scalex左右镜像之后translateZ(-1px)移动到另一个数字的后面，这样翻转过来就能看到镜像的数字
不是很完善，还有很多可以改进的地方
全部代码如下：

<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){    //每隔三位数加一个豆号    return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');};</script>

关于“css3翻牌翻数字效果怎么实现”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。