CSS 旋转动画在悬停时出现故障答案

【问题标题】：CSS Rotation Animation Glitching On HoverCSS 旋转动画在悬停时出现故障
【发布时间】：2025-12-28 23:15:17
【问题描述】：

我有一个关于 CSS 的问题。我编写了一个动画以在悬停时旋转。现在，当我将鼠标悬停在它上面时，它确实出现了很多故障。它只是一次又一次地开始旋转。有人可以帮忙吗。代码在这里：

#text {
            width: 300px;
            height: 150px;
            background-color: lightgray;
            border-left: 0px groove;
            border-top: 0px groove;
            border-radius: 10px;
            margin: auto;
            padding: 5px;
            transition: all 0.3s ease-in;
           
        }

         #text:hover {
            border-left: 10px groove;
            border-top: 10px groove;
            background-color: lightskyblue;
            transform: rotateY(360deg);
        } 

        #text::after {
            content: "Hover me";
            font-size: 30px;
            margin-left: 100px;
            color: black;
        }

        #text:hover::after {
            content: "If you want to know how to get started as a web developer, take a look at my youtube channel";
            margin: 0;
            font-size: 20px;
        }

<div id="text">
       
    </div>

【问题讨论】：

它会出现故障，因为一旦转换开始，您就不会再悬停了。
添加到 paulie d，您可能想要添加一个处理 hover 的容器。子容器应该接收转换
你能想象一下吗？我现在不能关注你。我有更多这样的，所以我不知道这是否有效

标签： html css rotation

【解决方案1】：

正如 Paulie_D 正确指出的，您的 :hover 会触发动画，但会在您的鼠标离开 #text 元素时终止动画。所以它会重置。

有多种方法可以解决这个问题，例如这个示例，以创建一个不会移动但只会触发动画的新容器元素。

.text {
  width: 100%;
  height: 150px;
  background-color: lightgray;
  border-left: 0px groove;
  border-top: 0px groove;
  border-radius: 10px;
  padding: 5px;
  transition: all 0.3s ease-in;
  margin-bottom: 20px;
}

.animated-card {
  margin: auto;
  width: 300px;
}

.animated-card:hover > .text {
  transform: rotateY(360deg);
}

.text:hover {
  border-left: 10px groove;
  border-top: 10px groove;
  background-color: lightskyblue;
}

.text::after {
  content: "Hover me";
  font-size: 30px;
  margin-left: 100px;
  color: black;
}

.text:hover::after {
  content: "If you want to know how to get started as a web developer, take a look at my youtube channel";
  margin: 0;
  font-size: 20px;
}

<div class="animated-card">
  <div id="text"></div>
</div>

<div class="animated-card">
  <div class="text"></div>
</div>

<div class="animated-card">
  <div class="text"></div>
</div>

<div class="animated-card">
  <div class="text"></div>
</div>

【讨论】：

非常感谢您的帮助。它甚至适用于动画卡片 div 中的更多卡片。 :))
@LightCode 啊，每页只能有一个唯一的 ID 名称（#text）。我用类 (.text) 替换了 ID，并使用 > 选择器仅影响元素内的 div。