css按钮控制图片的翻转

在CSS中，你可以通过创建一个包含图片的`<div>`元素，并应用一些关键的CSS属性来控制图片的翻转效果。这里有一个简单的例子：

<div class="flip-image">
  <img src="your-image.jpg" alt="Your Image">
</div>

然后，你可以使用CSS的`transform`属性以及`transition`属性来实现翻转动画，例如水平翻转：

.flip-image {
  perspective: 1000px; /* 创建3D空间 */
}

.flip-image img {
  width: 100%; /* 图片宽度 */
  height: auto; /* 自动调整高度保持宽高比 */
  position: absolute; /* 设置图片位置 */
  top: 0;
  left: 0;
  transform-style: preserve-3d; /* 保留子元素变换 */
  transition: transform 0.5s; /* 动画速度 */
}

.flip-image:hover img {
  transform: rotateY(180deg); /* 鼠标悬停时翻转180度 */
}

当用户鼠标悬停在图片上时，图片会沿Y轴旋转180度实现翻转。如果需要其他方向的翻转（如垂直），只需将`rotateY`替换为`rotateX`。