I am currently in the process of developing a preloader that rotates an image horizontally.
After researching different threads and ideas, I came across a solution that looks something like this:
<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>
However, I encountered an issue where the image only spins halfway before mirroring. You can see the problem in this fiddle I created: https://jsfiddle.net/1hw3xamj/
Essentially, the image rotates until it reaches its mirrored state and then returns back.
My objective is to have the image consistently spinning in one direction without turning when it is mirrored.
I hope my explanation makes sense.