必看！HTML&CSS实现3D翻转卡片动画

效果演示

这段代码是一个HTML和CSS的组合，用于创建一个具有3D翻转效果的卡片，当鼠标悬停在卡片上时，卡片会翻转显示背面内容。

HTML

<div class="myCard">
    <div class="innerCard">
        <div class="frontSide">
            <p class="title">前</p>
            <p>鼠标移入</p>
        </div>
        <div class="backSide">
            <p class="title">后</p>
            <p>鼠标移出</p>
        </div>
    </div>
</div>

• myCard 创建了一个类名为 “myCard” 的div元素，它将作为卡片的容器。
• innerCard 创建了一个类名为 “innerCard” 的div元素，它将作为卡片的内部结构。
• frontSide 和 backSide 分别创建了类名为 “frontSide” 和 “backSide” 的div元素，它们分别代表卡片的正面和背面。
• title，分别显示在卡片的正面和背面，显示文字“前”和“后”。
• p创建了两个段落，分别显示在卡片的正面和背面，提示用户鼠标的移入和移出动作。

CSS

.myCard {
  background-color: transparent;
  width: 190px;
  height: 254px;
  perspective: 1000px;
}

.title {
  font-size: 1.5em;
  font-weight: 900;
  text-align: center;
  margin: 0;
}

.innerCard {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  cursor: pointer;
}

.myCard:hover .innerCard {
  transform: rotateY(180deg);
}

.frontSide,
.backSide {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 1rem;
  color: white;
  box-shadow: 0 0 0.3em rgba(255, 255, 255, 0.5);
  font-weight: 700;
}

.frontSide,
.frontSide::before {
  background: linear-gradient(43deg, rgb(65, 88, 208) 0%, rgb(200, 80, 192) 46%, rgb(255, 204, 112) 100%);
}

.backSide,
.backSide::before {
  background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}

.backSide {
  transform: rotateY(180deg);
}

.frontSide::before,
.backSide::before {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: '';
  width: 110%;
  height: 110%;
  position: absolute;
  z-index: -1;
  border-radius: 1em;
  filter: blur(20px);
  animation: animate 5s linear infinite;
}

@keyframes animate {
  0% {
    opacity: 0.3;
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0.3;
  }
}

• .myCard 类定义了卡片容器的样式，背景透明，宽度200px，高度180px，perspective: 1000px; 定义了3D空间的透视效果。
• .title 类定义了标题的样式，字体大小为1.5em，字体加粗，文本居中，无外边距。
• .innerCard 类定义了卡片内部结构的样式，相对定位，宽度和高度填满容器，文本居中，transition: transform 0.8s; 表示变换效果的过渡时间为0.8秒，transform-style: preserve-3d; 保持3D效果，cursor: pointer; 将鼠标光标设置为指针形状。
• 当鼠标悬停在 .myCard 上时，.innerCard 将绕Y轴旋转180度，从而显示卡片的背面。
• .frontSide 和 .backSide 类定义了卡片正面和背面的样式，绝对定位，显示为flex布局，宽度和高度填满容器，backface-visibility: hidden; 隐藏背面，边框、圆角、颜色和字体加粗。
• .frontSide 和它的伪元素 ::before 定义了正面的背景渐变效果。
• .backSide 和它的伪元素 ::before 定义了背面的背景渐变效果。
• .backSide 类定义了背面的初始状态，绕Y轴旋转180度，使其在卡片背面。
• .frontSide::before 和 .backSide::before 伪元素定义了一个绝对定位的覆盖层，用于创建模糊效果，animation: animate 5s linear infinite; 定义了一个名为 “animate” 的动画，使模糊效果循环变化。
• @keyframes animate 定义了一个关键帧动画 “animate”，用于控制伪元素的透明度变化，从0.3变化到1再回到0.3，形成循环动画效果。