css数字两面翻转 |css3 自定义变量

数字两面翻转效果通过CSS的transform属性和transition属性实现。首先，大家需要创建一个父容器，用来包裹两个子元素：正面和反面。

<div class="flip-container">
<div class="flipper">
<div class="front">
1
</div>
<div class="back">
2
</div>
</div>
</div>
.flip-container {
perspective: 1000px;
}
.flipper {
position: relative;
transform-style: preserve-3d;
transition: 0.6s;
}
.front,
.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.back {
transform: rotateY(180deg);
}

在代码中，大家使用了perspective属性来创建了一个3D旋转的效果。transform-style设置为preserve-3d表示元素和其子元素一起旋转。而transition属性则用来定义元素的过渡效果。接下来，大家通过为正面和反面设置不同的transform属性，来完成两面翻转的效果。

现在，大家需要使用JavaScript来控制数字的变化，可以使用setInterval来不断地更新数字的内容。

var num = 1;
setInterval(function() {
num++;
if (num > 9) {
num = 0;
}
var frontEl = document.querySelector('.front');
var backEl = document.querySelector('.back');
frontEl.textContent = num;
backEl.textContent = num;
document.querySelector('.flipper').classList.toggle('flip');
}, 2000);

在代码中，大家定义了一个变量num，用来记录数字的变化。然后，使用setInterval来设置定时器，每隔一段时间就更新数字的内容。大家通过querySelector方法获取正面和反面的元素，并将它们的textContent属性设置为当前的数字。最后，大家使用classList.toggle方法，来切换flip类，从而实现翻转效果。

总的来说，数字两面翻转效果可以为网页增加趣味性和视觉震撼力。大家可以根据自己的需求，调整CSS和JavaScript代码来实现不同的效果。