css，点击图片翻开效果代码

以下是一种实现图片翻转效果的 CSS 代码：

HTML 代码：

<div class="flip-container">
  <div class="flipper">
    <div class="front">
      <img src="your-image-link" alt="Front Image">
    </div>
    <div class="back">
      <img src="your-image-link" alt="Back Image">
    </div>
  </div>
</div>

CSS 代码：

.flip-container {
  perspective: 1000px;
}

.flipper {
  position: relative;
  transform-style: preserve-3d;
  transition: 0.6s;
  transform-origin: center;
  height: 0;
  padding-bottom: 75%;
}

.flip-container:hover .flipper {
  transform: rotateY(180deg);
}

.front, .back {
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
}

.front {
  z-index: 2;
}

.back {
  transform: rotateY(180deg);
  z-index: 1;
}

.front img, .back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

你可以将 "your-image-link" 替换成你自己的图片链接。然后将整个代码放到你网站的 HTML 文件中即可。当鼠标悬停在图片上时，图片将翻转并显示背面的图片。