CSS畅想 | 纯 CSS 实现手绘新年贺卡

原创

叶一一yyy 2023-08-18 09:31:35 博主文章分类：CSS畅想 ©著作权

文章标签 CSS3 3D效果 文章分类 Html/CSS 前端开发 yyds干货盘点

©著作权归作者所有：来自51CTO博客作者叶一一yyy的原创作品，请联系作者获取转载授权，否则将追究法律责任

old school 与回忆

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

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

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

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

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

CSS畅想 | 纯 CSS 实现手绘新年贺卡_3D效果

贺卡创意的来源

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

城市星河只要加上一个效果，就是一个电子贺卡。而这个效果便是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;
}