css3实现卡片反转3d效果

要使用CSS3实现卡片的3D反转效果，你可以使用transform-style: preserve-3d;和transition属性。以下是一个简单的例子：

HTML:

<div class="card">
  <div class="card-face front">正面</div>
  <div class="card-face back">背面</div>
</div>

CSS:

.card {
  width: 200px;
  height: 200px;
  margin: 50px;
  perspective: 1000px;
  position: relative;
}
 
.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: transform 1s;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid #000;
}
 
.front {
  background-color: red;
  z-index: 2;
}
 
.back {
  background-color: blue;
  transform: rotateY(180deg);
}
 
.card:hover .card-face {
  transform: rotateY(180deg);
}
 
.card:hover .front {
  z-index: 1;
}
 
.card:hover .back {
  z-index: 2;
}

这段代码实现了一个在鼠标悬停时翻转180度的卡片效果。.card是父容器，它有3D视图的透视效果。.card-face是卡片的两面，通过backface-visibility: hidden;隐藏了它们的背面，直到卡片翻转。.front和.back分别代表卡片的正反面。当鼠标悬停在卡片上时，卡片的正反面通过z-index调整层叠顺序，产生翻转动画。