Trying to make a logo rotate in the Y direction as so :
@keyframes rotateLogo {
0% {
transform: rotateY(0deg)
}
// 50% {
// transform: rotateY(180deg)
// }
100% {
transform: rotateY(360deg)
}
}
.splashAnimation{
animation-name: rotateLogo;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
However it ends up looking like this:
https://giphy.com/gifs/g0gEjkRZ5lLI3mLBDo
Thanks for reading, will post a jsbin but i imagine this is a known issue.
JSBIN: https://jsbin.com/yihoriniso/edit?html,css,output
EDIT: This seems to happen as described because of an optical illusion. Is there any way to provide perspective in the rotation so as to provide some cues to the brain to perceive the rotation as unidirectional?
See Question&Answers more detail:os