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

前言：

hello！掘友们，大家好。马上就是1024程序员节了，不知道大家的公司都为你们准备了是什么？很期待，大家可以在评论里吐露下，让小编羡慕羡慕。

回归正题，大家也都看到了，CSS太强大了，他还能这样玩。的的确确，CSS有我们想象不到的功能。下边是关于我用CSS简单的制作了一个翻牌器的效果。

学无止境，共同进步。

CSS

html {
  font-size: 22px;
}

body {
  height: 100vh;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-family: Helvetica, Arial;
  background-image: radial-gradient( circle,  rgba(239,252,250,1) 5.5%, rgba(154,192,206,1) 100.2% );
}

.card-container {
  width: 300px;
  height: 400px;
  position: relative;
  perspective: 1000px;
}

.cover, .back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  transition: transform .25s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  border-radius: .4rem;
  box-shadow: 0 .2rem .5rem rgba(0, 0, 0, .18);
  text-shadow: 0 .15rem .2rem rgba(0, 0, 0, .2);
}
.cover {
  background-color: blue;
  transform: rotatey(0deg);
  background-image: radial-gradient( circle,  rgba(23,156,214,1) 0%, rgba(52,48,111,1) 100.2% );
  color: #fff;
}
.card-container:hover .cover {
  transform: rotatey(180deg);
}
.back {
  background-color: yellow;
  transform: rotatey(-180deg);
  background-image: radial-gradient( circle,  rgba(255,171,0,1) 0%, rgba(255,139,0,1) 90.1% );
}
.card-container:hover .back {
  transform: rotatey(0deg);
}

HTML

    <div class="card-container">
        <div class="cover">
          反面
        </div>
        <div class="back">
          正面
        </div>
    </div>
      
    <div class="card-container">
        <div class="cover">
          反面
        </div>
        <div class="back">
          正面
        </div>
    </div>
      
    <div class="card-container">
        <div class="cover">
          反面
        </div>
        <div class="back">
          正面
        </div>
    </div>

总结

CSS的强大之处是我们想象不到的，简单的样式设置，既可以让元素动起来，其内置的原理就是利用了transform: rotatey(0deg);再加上transition设置过度时长，让元素在固定的时间内完成旋转，达到翻牌的效果。码上掘金有很多我的demo小实例，大家可以观看操作一下，主页的文章也有其他的技术文类章，希望对大家有所帮助。