CSS实现3D卡片旋转

先准备两个div容器用来定义两张卡片的正反面

直接上代码

html代码

  <div class="card">
    <div class="front side">
      <p>正面</p>
    </div>
    <div class="back side">
      <h1>反面</h1>
    </div>
  </div>

CSS代码

.card {
  position: relative;
  /* 父级 相对定位*/
}
.side { 
  /* 两张卡片设置公共样式，使其重叠在一起 */
  position: absolute;
  left: 0;
  top: 0;
  width: 300px;
  height: 400px;
  /* 设置两张卡片翻转到背后不可见，并设置过度动画效果 */
  backface-visibility: hidden;
  transition: all 1.5s ease;
}
.front {
  background-color: blueviolet;
  /* 给正面卡片单独设置样式颜色 */
}
.back {
  /* 反面 */
  background-color: rgb(152, 222, 135);
  /* 给反面卡片单独设置样式颜色 */
  /* 反面卡面默认翻转到后面 */
  transform: rotateY(-180deg);
}
.card:hover .front {
  /* hover 效果时 正面翻转到后面*/
  transform: rotateY(-180deg);
}
.card:hover .back {
  /* hover 效果时 反面翻转到前面*/
  transform: rotateY(0deg);
}