持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情

前言

最近公司活动需要开发抽卡活动，卡片拥有两面，一面是以公司LOGO出现的背面，另一面则是卡片的内容，还需要做一个动画效果，鼠标悬浮时就做一个翻转的效果，鼠标移走之后则又恢复，点击之后就时翻开卡片。

掘金代码块展示

核心代码

视图代码块，这里讲解一下为什么使用label, 因为使用了 input的多选框，使他点击之后就选中，就暂时为正面
一个卡片需要两个面

<label>
  <input type="checkbox">
  <div class="flip-box-content">

    <div class="flip-box-front">
      <div class="house-card front">
        <div class="house-card-inner">
          <h3>封面</h3>
          <p>正面!</p></div>
      </div>
    </div>

    <div class="flip-box-rear">
      <div class="house-card rear">
        <div class="house-card-inner">
          <h3>底页</h3>
          <p>反面.</p></div>
      </div>
    </div>

  </div>
</label>

CSS核心代码

transform-style 元素在3D空间中呈现
rotateY 围绕其Y轴旋转
并且使用绝对定位，让他们重叠起来

.flip-box-content {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 42px rgba(0, 0, 0, 0.25);
  height: 420px;
  cursor: pointer;
  user-select: none;
  transition: transform 0.8s;
  transform-style: preserve-3d;

  .flip-box-front, .flip-box-rear {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .flip-box-rear {
    transform: rotateY(180deg);
  }
}

触发动画

&:hover, input:checked + {
  .flip-box-content {
    transform: rotateY(180deg);
  }
}

这次只做了一个简单得旋转使用，还加上缩放效果，透视视图效果，等等

总结

本次又把项目活动中的小Demo拿出来了，都是自己开发中摸索学习的小技巧，虽然没什么技术难度，但每次学习都能有一定收获，我知道自己写的不是最好的，不是最深入了解的，但是坚持学习，并回顾重构，相比最开始只能写静态，到现在已经能写上一点动画效果了。

纯CSS 实现卡片翻转

前言

掘金代码块展示

核心代码

总结