Javascript 嗨，我不能让CSS旋转动画工作？使用最新版本。更新：在Chrome上运行

我似乎无法让图像按我所希望的那样旋转。我相信图像类有问题，但我一直在尝试，但未能使动画功能

这是我代码的一部分。我只包括与问题相关的代码：

img：悬停{ 游标：默认值； 变换：旋转360度； 过渡：所有0.3秒均为0秒； } 第N个孩子1{ 动画名称：旋转； 动画持续时间：4s； 动画迭代次数：3次； } @关键帧旋转{ 从{变换：旋转0度； } 到{变换：旋转360度； }} 我的教程3 应该使用img:hover而不是img:hover

---

演示：

您的源代码已损坏。试着这样做：

<style type="text/css">
img:hover {
    transform: rotate(360deg);
    transition: all 0.3s ease-in-out 0s;
}

#spin {
    animation-name: spin;
    animation-duration: 4s;
    animation-iteration-count: 3;
}

@keyframes spin {
    from {
        transform: rotate(0deg); 
    }
    to {
        transform: rotate(360deg);
    }
}
</style>
<p><img src="spin.png" id="spin"></p>
<p><img src="spin.jpg"></p>

---

id=spin的img获得动画，而另一个仅在悬停时翻转。小心第n种类型！除了Firefox之外，几乎不支持此功能。

您使用的浏览器是什么？您可能需要在webkit中添加前言：另外，伪选择器前面不应该有空格img:hover应该是img:hover我在使用Chrome。我现在已经删除了空格。嗨，你知道我需要什么吗？不使用类或id只旋转一个图像？这是不可能的。CSS动画不是这样工作的。