仅使用 CSS 翻转 UNO 卡

今天打开推特，就看到了艾莉制作的这张精美卡片动画。就是这个：

我觉得这个想法很酷。于是我开始创作类似的东西。很快，我就有了在 UNO 牌上实现同样功能的想法，因为疫情期间我们玩 UNO 牌的次数越来越多。

从零开始创作插画的过程相当有趣。学到了：

• 保留 3d变换样式
• 使用-webkit-linear-gradient 的线性渐变文本颜色
• 使用之前和之后的伪选择器
• 悬停时翻转的自定义实现。

这是成品的代码笔：

希望你也能利用空闲时间，打造一些很酷的东西！
干杯！