h5 数字变化_css3数字翻牌效果代码示例

一个图片数字显示，想着纯数字转换太简单了，然后就顺手做了一个翻牌的效果。

首先做一些页面布局：

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;