I attempted to create a rotating div using a simple code snippet:
<!DOCTYPE html>
<html>
<head>
<style>
.spinner {
width: 100px;
height: 100px;
margin: auto;
border-radius: 50%;
border-bottom: 1px solid #f00;
animation: rotate-bottom 1s linear infinite;
}
@keyframes rotate-bottom {
from {
transform: rotateX(30deg) rotateY(-60deg) rotateZ(0deg);
}
to {
transform: rotateX(30deg) rotateY(-60deg) rotateZ(360deg);
}
}
</style>
</head>
<body>
<div class="spinner"></div>
</body>
</html>
After sharing the code on jsfiddle for testing: http://jsfiddle.net/zg8vdyns/1/
The rotation appears smooth and flawless in Chrome and Internet Explorer. However, there are issues when viewed in Firefox (39.0). The spinning line is shorter than expected and the animation does not run smoothly, suggesting a possible rendering problem exclusive to Firefox. Any suggestions or insights regarding this issue would be greatly appreciated.
While I am aware of the need to prefix 'animation' and keyframe properties with '-moz-', it seems unrelated to this specific problem.