old school 与回忆

我记得上学的时候，很喜欢互赠纸质贺卡。有一段时间，立体贺卡特别流行，深受大家的喜欢。

随后，伴随着互联网的发展，诞生了电子贺卡，不仅寄送方便，而且可以播放音乐和动画效果，且是免费的。因此电子贺卡逐渐成为人们相互问候的优先选择。

再后来，无论是电子贺卡，还是纸质贺卡，都逐渐淡出大众的视野。偶尔，出去旅游，会购买当地特色的明信片作为伴手礼。听说在有「世界尽头」之称的乌斯怀亚，有一间小邮局，如果有机会还蛮想去，买一张明信片，上面有“世界尽头邮政”字样，可以买来现场填写地址后邮寄到全球各地。

岁末将至，敬颂冬绥。想到好久不见的贺卡，在这个新旧交接的岁末，想用复古一些的方式，给朋友们送一份祝福。

因为大家天南海北的，电子贺卡比较方便，于是，我想到用 CSS 绘制一张新年贺卡，送给五湖四海的朋友。

贺卡创意的来源

前面分享了城市星河的实现过程，突然联想到电子贺卡。

城市星河只要加上一个效果，就是一个电子贺卡。而这个效果便是3D翻转。

3D 翻转

两种翻转

我一共设计了两种翻转，第一个是抽出卡片时的自动翻转，另一个是通过点击卡片的手动翻转。

因为两种翻转都是通过点击卡片触发的，所以用到同一个方法处理两种交互。我是通过设置了一个点击计数：count，区分不同的触发方式的。

// 触发计数，初始为0
var count = 0;
card.addEventListener('click', e => {
  // 当count值大于等于1时，表示进行的手动翻转
  if (count >= 1) {
    card.classList.toggle('overturn');
  } else {
    /*
     * 当count值小于1时，表示需要进行自动翻转
     * 自动翻转前，需要将信封去掉，卡片向上滑动
     * */
    envelope.style.display = 'none';
    cardWarp.classList.add('card-up');
    setTimeout(function () {
      card.classList.add('overturn');
    }, 1000);
  }
  count++;
});

3D 翻转效果

首先需要允许子元素位于 3D 空间中。需要将元素的 transform-style 属性设置为 preserve-3d。这样，在元素进行翻转的时候，子元素会才会有 3D 转换的效果。

实际的翻转效果是通过为元素的两个属性组合实现的，一个是翻转切换的动画，另一个是背向用户时不可见。

• 翻转动画通过 transform 设置 3D 转换效果即可，元素沿 X 轴和 Z轴进行旋转；
• 背向用户时不可见，是通过设置 backface-visibility 的属性为 hidden。它的值为 visible 时，表示可见。

.card {
  position: relative;
  transform-style: preserve-3d;
  height: 100%;
  width: 100%;
  transition: transform 2s ease-in;
}
.card.overturn {
  transform: matrix3d(-1, 0, 0, 0, 0, 1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1);
}
.card-back {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: matrix3d(-1, 0, 0, 0, 0, 1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1);
}
.card-item {
  backface-visibility: hidden;
}

总结

这次实现的新年贺卡的元素较多，但是大部分使用一个标签完成了实现，使得整体结构偏简洁。当然也在于我日常对图形实现经验在不断的练习中，得到了很好的积累。盖业精于勤也。

最后，送上叶一一的祝福

一月月相似，一年年不同

每个月都好像匆匆忙忙就过去了，唯有回望的时候，才发现这一年的不同。今年很多收获都离不开阅读。

读《命运》，重新审视这个词汇，靠着为数不多的经验，总结出一条人生经验：要好好的活着，因为人生一定会遇到好事的。

看《算命》，不再纠结活着的意义，因为感悟出：活着本身就是最大的意义。

读《季羡林散文》，解锁了人生的界石。今后的路怎么走？向着有亮光的地方前行。

查阅了很多图形、画册，于是诞生了「CSS 畅想」系列。

阅览了很多优秀的文章，于是我也开启了源码的阅读。

翻阅了许许多多的沸点，于是我收获了诸多好友。

新的一年要开篇了，虽然我不晓得怎么去写年，但是我可以用写文章的方式去记录它。

作者：非职业「传道授业解惑」的开发者叶一一
简介：「趣学前端」、「CSS畅想」系列作者，华夏美食、国漫、古风重度爱好者，刑侦、无限流小说初级玩家。
如果看完文章有所收获，欢迎点赞👍 | 收藏⭐️ | 留言📝。