css数字变化翻折动画 |css3特效大全网站

.num {
position: relative;
}
.num:before {
content: '';
position: absolute;
top: 0;
left: 0;
background: #fff;
width: 100%;
height: 100%;
transform: perspective(800px) rotateX(-90deg);
transform-origin: bottom;
transition: transform 0.4s;
}
.num:after {
content: '';
position: absolute;
top: 0;
left: 0;
background: #fff;
width: 100%;
height: 100%;
transform: perspective(800px) rotateX(0deg);
transform-origin: top;
transition: transform 0.4s;
}
.num.changed:before {
transform: perspective(800px) rotateX(0deg);
transform-origin: top;
}
.num.changed:after {
transform: perspective(800px) rotateX(90deg);
transform-origin: bottom;
}

此时，大家用JavaScript或jQuery来设置数字的值。例如，大家需要将一个数字从0变为1，可以执行以下代码。

var numElement = document.querySelector('.num');
numElement.classList.add('changed');
numElement.textContent = '1';

上面的代码将num元素的.class改为.changed，从而触发CSS样式中的翻折动画效果。然后用JavaScript或jQuery将num值设置为1。您可以在num元素外部包含一个容器，以确保num元素具有合适的布局。

到这里，CSS数字变化翻折动画就完成啦！