<div class="card">
  <div class="_card front">
    <div class="img-box">
      <img src="https://cenxiaodong.github.io/picx-images-hosting/20241114/pexels-creative-vix-9754.pfd17mwoj.webp" alt="">
    </div>
    <div class="text">
      名山大川
    </div>
  </div>
  <div class="_card reverse">
    <div class="img-box">
      <img src="https://cenxiaodong.github.io/picx-images-hosting/20241114/pexels-pixabay-247600.5j47xc7lrw.webp" alt="">
    </div>
    <div class="text">
      江河湖海
    </div>
  </div>
</div>
body {
  background: #ccc;
}
.card {
  width: fit-content;
  position: relative;
  perspective: 900px;
}
._card {
  border-radius: 10px;
  width: 150px;
  background: #fff;
  height: 200px;

  transition: all 0.5s ease;
  overflow: hidden;
}
._card .img-box {
  width: 100%;
  height: 70%;
}
.img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
._card .text {
  height: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.front {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.front,
.reverse {
  /*  背面不可见 */
  backface-visibility: hidden;
}
.reverse {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  transform: rotateY(180deg);
}
.card:hover .front {
  transform: rotateY(-180deg);
}
.card:hover .reverse {
  transform: rotateY(0deg);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.