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

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

在成都网站制作、成都网站建设中从网站色彩、结构布局、栏目设置、关键词群组等细微处着手,突出企业的产品/服务/品牌,帮助企业锁定精准用户,提高在线咨询和转化,使成都网站营销成为有效果、有回报的无锡营销推广。创新互联专业成都网站建设十年了,客户满意度97.8%,欢迎成都创新互联客户联系。

效果图如下:

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

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

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

效果预览,新窗口打开:https://codepen.io/andy-js/pen/ExaGxaL

首先做一些页面布局:

     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)移动到另一个数字的后面,这样翻转过来就能看到镜像的数字
    不是很完善,还有很多可以改进的地方
    全部代码如下:

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


    分享文章:css3翻牌翻数字效果怎么实现
    本文链接:http://myzitong.com/article/pigsco.html