css3翻牌翻数字的示例代码

今天接到公司一任务，效果图如下： 没有具体说做什么效果，但是想着纯数字转换太简单了，然后就顺手做了一个翻牌的效果。 效果预览，新窗口打开：https://codepen.io/andy-js/pen/ExaGxaL 首先做一些页面布局： <ul></ul> body{background: #000;} ul{ list-style: none; margin:100px 0; display: flex; justify-content:center; line-height: 56 标题中的“css3翻牌翻数字的示例代码”指的是使用CSS3技术实现一种数字翻转效果，通常用于计数器或动态展示数值变化的场景。这种效果通过模拟数字卡片翻转来展示数字的更新，视觉上较为吸引人。描述中提到的任务是创建一个数字转换效果，但作者选择了更具有互动性的翻牌效果。 在这个示例中，主要使用了以下几个CSS3特性： 1. **Flexbox布局**：`display: flex`和`justify-content: center`用于居中排列数字列表，使整体布局更加美观。 2. **Transform属性**：`transform-style: preserve-3d`和`transform: rotateY()`是实现翻转效果的关键。`rotateY()`函数控制元素沿着Y轴翻转，而`transform-style: preserve-3d`允许子元素保持其3D空间位置，这对于翻转效果是必要的。 3. **Transition过渡**：`transition: 1s all ease`定义了翻转动画的过渡时间、属性和缓动效果，使得数字翻转平滑自然。 4. **Perspective透视**：`perspective: 1000px`设置了观察者距离元素的距离，影响3D变换的视觉效果，让翻转看起来更加立体。 5. **伪元素和绝对定位**：每个数字由两个`<p>`元素组成，一个显示正面的数字，一个显示背面的镜像数字。通过`::nth-child(2)`选择第二个`<p>`元素，并使用`transform: scalex(-1) translateZ(-1px)`进行左右镜像和位置调整，使得翻转时背面的数字能够正确显示。 JavaScript部分负责动态更新数字和触发翻转动画： 1. **数组操作**：通过`addComma()`函数对数字进行格式化，每三位添加一个逗号，便于阅读。同时，使用数组来存储和操作数字卡片。 2. `setInterval`函数创建定时器，定期更新数字并执行翻转动画。每次更新时，会比较当前数字和新的数字，对变化的位进行翻转。 3. **DOM操作**：当数字长度改变时，需要动态插入或移除数字卡片。`document.createElement()`创建新的`<li>`元素，`appendChild()`和`insertBefore()`用于插入这些元素。 4. **CSS属性更改**：通过修改`deg`属性控制翻转角度，并通过`style.transform`更新CSS3的`transform`属性，触发翻转动画。 这个示例代码展示了如何结合CSS3的3D变换和JavaScript实现一个动态的翻牌数字效果，适用于各种需要实时更新数字的场景，如计数器、倒计时等。虽然代码可能还有优化空间，但已经很好地演示了CSS3在动态效果方面的强大能力。