我无法翻转该图像，我做错了什么？

Question

我试图在两个图像之间翻转，但它不起作用。我的错误在哪里？ 我已经检查并重新编写了很多次代码。

当我将鼠标悬停在图像上时，它不会更改为另一张图像。

.flip-container {
  width: 300px;
  height: 200px;
  perspective: 1000px;
}
.flipper{
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.flip-container:hover .flipper{
  transform: rotateX (180deg)
}
.back{
  transform: rotateY(180deg);
}
.front, .back{
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

<div class="flip-container">
  <div class="flipper">
    <div class="front">
      <img src="https://picsum.photos/id/411/300/200" />
    </div>
    <div class="back">
      <img src="https://picsum.photos/id/249/300/200" />
    </div>
  </div>
</div>

Answer 1

由于打字错误造成的。

您的代码有：

transform: rotateX (180deg)

但必须是：

transform: rotateX(180deg);

.flip-container {
  width: 300px;
  height: 200px;
  perspective: 1000px;
}
.flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.flip-container:hover .flipper {
  transform: rotateX(180deg);
}
.back{
  transform: rotateY(180deg);
}
.front, .back{
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

<div class="flip-container">
  <div class="flipper">
    <div class="front">
      <img src="https://picsum.photos/id/411/300/200" />
    </div>
    <div class="back">
      <img src="https://picsum.photos/id/249/300/200" />
    </div>
  </div>
</div>

Answer 2

我在您的代码中发现了一些问题，这些问题可能导致翻转效果无法按预期工作。

CSS 转换语法错误：在悬停选择器中，转换属性中存在语法错误。正确的语法不应在函数名称 (rotateX) 和左括号之间有空格。

错误： CSS 复制代码 变换：旋转X（180度）； 正确：

CSS 变换：rotateX(180deg);

悬停效果未重置：悬停效果可能无法正确重置，因为翻转容器的大小由内容的大小决定，而内容的大小会在旋转内容时发生变化。这可能会导致悬停区域在动画期间发生变化。要解决此问题，您可以为 .flip-container 设置固定大小。

这是更正后的代码：

HTML：

<div class="flip-container">
  <div class="flipper">
    <div class="front">
      <img src="https://picsum.photos/id/411/300/200" alt="Front Image" />
    </div>
    <div class="back">
      <img src="https://picsum.photos/id/249/300/200" alt="Back Image" />
    </div>
  </div>
</div>

CSS：

.flip-container {
  width: 300px;
  height: 200px;
  perspective: 1000px;
}

.flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Add vendor prefixes for better browser compatibility */
.flip-container:hover .flipper {
  transform: rotateX(180deg);
}

.back {
  transform: rotateY(180deg);
}

.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

确保在 HTML 和 CSS 文件中包含正确的代码。这应该可以解决您所面临的图像翻转效果无法正常工作的问题。