CSS3 实现卡片翻牌效果

/* 设置基础的卡片容器样式 */
.card-container {
  width: 300px;
  height: 200px;
  perspective: 1000px;
}
 
/* 设置卡片样式 */
.card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 1s;
}
 
/* 设置卡片背面样式 */
.card .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  background-color: #f0f0f0;
  text-align: center;
  line-height: 200px; /* 使文本垂直居中 */
}
 
/* 设置卡片正面样式 */
.card .front {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #bbada0;
  text-align: center;
  line-height: 200px; /* 使文本垂直居中 */
}
 
/* 当卡片容器被悬停时，卡片翻转180度 */
.card-container:hover .card {
  transform: rotateY(180deg);
}

这段代码展示了如何使用CSS3中的3D转换和悬停效果来创建卡片翻牌效果。.card-container 是卡片的外层容器，它定义了一个3D视图，并设置了一个视距，以便子元素可以进行3D转换。.card 是卡片本身，它使用 transform-style: preserve-3d; 来保持其子元素的3D位置，并且设置了一个过渡效果，以便在悬停时可以平滑地旋转。.back 和 .front 分别代表卡片的正反面，.back 使用 backface-visibility: hidden; 来在卡片翻转时隐藏背面内容，而 .front 则设置了背景颜色和文本对齐。最后，当 .card-container 被悬停时，卡片的 transform 属性被设置为旋转Y轴180度，从而显示出背面内容。