运用CSS实现数字卡片翻转效果的方法是什么

发布时间：2023-09-01 14:34:19 所属栏目：语言来源：

导读：这篇文章给大家分享的是用CSS实现数字卡片翻转效果的方法是什么。小编觉得挺实用的，因此分享给大家做个参考，文中的介绍得很详细，而要易于理解和学习，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

这篇文章给大家分享的是用CSS实现数字卡片翻转效果的方法是什么。小编觉得挺实用的，因此分享给大家做个参考，文中的介绍得很详细，而要易于理解和学习，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

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

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

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!