CSS3 特效 - 3D 翻转 — 双面卡动效 - 《Fuarmy 小记》

技术要点
具体实现

源码地址：GitHub

技术要点

翻转使用 2个同等大小的容器（.front, .back）;
transform-style: preserve-3d; 元素的子元素可以被3D遮挡；参考：MDN：transform-style
backface-visibility: hidden; 3d状态下，可以使用该属性隐藏背面；参考：MDN：backface-visibility
backdrop-filter: blur(10px); 元素后面添加图形效果；参考：MDN：backdrop-filter
transition； 过渡动画；参考：MDN：transition
transform: rotateY(180deg); 偏转角度；参考：MDN：transform

注意：DOM初始化时， transfrom 偏转属性生效，会产生动画效果导致正面与背面动画不一致，本文采用策略：先隐藏 .back 背面（display：none， display 设置为 none 时会使 transition 失效），当DOM加载完成后将元素显示。

具体实现

index.html HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D 翻转--双面卡（银行卡-正面，背面）</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
  <section>
    <div class="card">
      <div class="face front">
        <h3 class="debit">Debit Card</h3>
        <h3 class="bank">Bank Name</h3>
        <img src="chip.png" class="chip" />
        <h3 class="number">0123 4567 8901 2345</h3>
        <h5 class="valid"><span>Valid<br>thru</span><span>10/23</span></h5>
        <h5 class="cardHolder">Muhammad Irshad</h5>
      </div>
      <div class="face back">
        <div class="blackbar"></div>
        <div class="ccvtext">
          <h5>Autorized Signature-not valid unless signed</h5>
          <div class="whiteBar"></div>
          <div class="ccv">123</div>
        </div>
        <p class="text">
          Lorem ipsum dolor sit amet, consecteur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisiut aliquip ex ea commodo.
          <br/>
          洛雷姆·伊普苏姆·多洛尔（Lorem ipsum dolor）坐立不安，服务员回扣和活力十足，使劳苦与悲伤，但在eiusmod上做一些重要的事情。 这些年来，我会来的，她会从学校的优势中受益于运动带来的好处nisiut aliquip。
        </p>
      </div>
    </div>
  </section>
  <script src="index.js"></script>
</body>
</html>

style.css 样式文件

@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  overflow: hidden;
}
section {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #1c1c25;
}
section::before {
  content: "";
  position: absolute;
  bottom: -10%;
  left: 40%;
  width: 600px;
  height: 600px;
  background: linear-gradient(#f00, #f0f);
  border-radius: 50%;
}
.card {
  position: relative;
  width: 508px;
  height: 314px;
  transform-style: preserve-3d;
  perspective: 500px;
}
.card .face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 15px 35px rgba(0,0,0,0.5);
  border-radius: 15px;
  background: rgba(255,255,255, 0.05);
  backdrop-filter: blur(10px);
  transform-style: preserve-3d;
  transition: 1s;
  backface-visibility: hidden;
}
.card:hover .face.front {
  transform: rotateY(180deg);
}
.card .face.back {
  transform: rotateY(180deg);
  /* 隐藏进入页面时背面元素（动画） */
  display: none;
}
.card:hover .face.back {
  transform: rotateY(360deg);
}
.card .face.front::before,
.card .face.front::after {
  content: "";
  position: absolute;
  bottom: 40px;
  right: 40px;
  width: 60px;
  height: 60px;
  background: #fff;
  border-radius: 50%;
  opacity: 0.5;
}
.card .face.front::after {right: 80px;opacity: 0.7;}
.card .face.front .debit {
  position: absolute;
  left: 40px;
  top: 30px;
  color: #fff;
  font-weight: 500;
}
.card .face.front .bank {
  position: absolute;
  right: 40px;
  top: 25px;
  color: #fff;
  font-weight: 500;
  font-style: italic;
  font-size: 24px;
}
.card .face.front .chip {
  position: absolute;
  left: 50px;
  top: 80px;
  max-width: 64px;
}
.card .face.front .number {
  position: absolute;
  left: 40px;
  bottom: 130px;
  color: #fff;
  font-weight: 500;
  letter-spacing: 6px;
  font-size: 18px;
  text-shadow: 0 2px 1px #0005;
  font-family: "Orbitron", sans-serif;
}
.card .face.front .valid {
  position: absolute;
  bottom: 90px;
  left: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: 300;
  line-height: 1em;
  text-align: right;
}
.card .face.front .valid span:last-child {
  margin-left: 20px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 2px;
}
.card .face.front .cardHolder {
  position: absolute;
  bottom: 40px;
  left: 40px;
  color: #fff;
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 2px;
}
.card .face.back .blackbar {
  position: absolute;
  top: 40px;
  width: 100%;
  height: 60px;
  background: #000;
}
.card .face.back .ccvtext {
  position: absolute;
  top: 120px;
  left: 30px;
}
.card .face.back .ccvtext h5 {
  color: #fff;
  font-weight: 400;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.card .face.back .ccvtext .whiteBar {
  position: relative;
  width: 400px;
  height: 40px;
  background: #fff;
  margin-top: 5px;
}
.card .face.back .ccvtext .ccv {
  position: relative;
  background: #ccc;
  color: #111;
  width: 50px;
  height: 30px;
  left: 395px;
  top: -35px;
  font-weight: 600;
  letter-spacing: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card .face.back .text {
  position: absolute;
  bottom: 30px;
  left: 30px;
  right: 30px;
  color: #fff;
  font-size: 10px;
  line-height: 1.4em;
  font-weight: 300;
}

index.js

window.onload = function() {
  let back = document.querySelector(".face.back");
  // 页面加载完成后，将隐藏的元素显示出来
  back.setAttribute("style", "display: block");
}

内容来源于公众号 @前端先锋