css卡片翻转 父元素翻转子元素不翻转效果

要在父元素翻转的同时保持子元素不翻转，可以使用3D转换来实现。以下是一个简单的示例：

HTML:

<div class="card">
  <div class="card-container">
    <div class="face front">
      Front Face
    </div>
    <div class="face back">
      Back Face
    </div>
  </div>
</div>

CSS:

.card {
  perspective: 1000px;
}
 
.card-container {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  transition: transform 1s;
}
 
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
 
.front {
  background-color: red;
}
 
.back {
  background-color: blue;
  transform: rotateY(180deg);
}
 
.card:hover .card-container {
  transform: rotateY(180deg);
}

在这个例子中，.card 是父元素，.card-container 是包含两个 .face 元素的容器。.front 是正面，.back 是背面。当 .card 容器被悬停时，.card-container 会执行翻转动画，但子元素 .face 由于设置了 backface-visibility: hidden;，它们不会翻转，只有翻转180度后才显示出来。