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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。