添加水平旋转的预加载器

Question

我目前正在开发一个预加载程序，它应该可以水平旋转图像。

我发现了各种各样的线索和想法，所有这些都包含了类似的基本内容：

<style>
.imageRotateHorizontal{
-moz-animation: spinHorizontal 3s infinite linear;
-o-animation: spinHorizontal 3s infinite linear;
-webkit-animation: spinHorizontal 3s infinite linear;
animation: spinHorizontal 3s infinite linear;
}

@keyframes spinHorizontal {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(359deg);
}
}
</style>

我的问题是，图像就像旋转了一半，正如你在我创作的小提琴中看到的那样：https://jsfiddle.net/1hw3xamj/

所以基本上，图像会一直转为镜像，然后再转回来。。。

不过，我的目标是让它永远朝着一个方向旋转，而不是在镜像时旋转。。。

我希望你明白我的意思。

Answer 1

图像旋转了360度。这很难说，因为你使用的图像是对称的。

我已经将图像更改为不同的图像，这样你就可以看到它在旋转：https://jsfiddle.net/1hw3xamj/

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Flat_tick_icon.svg/1200px-Flat_tick_icon.svg.png" class="rotate" width="200" height="200" />