How to rotate image in elliptical form without rotating the image CSS

Question

I have a jfiddle here in which I am rotating an image in an elliptical form. However, I do not want the image to rotate at the same time.

To correct this, I set the rotational -webkit-keyframes mO with the following properties:

0% { -webkit-transform: rotate(0deg); rotate(0deg);   }
100% { -webkit-transform: rotate(360deg); rotate(-360deg); }

Because in past attempts to get an elliptical rotation, setting the opposite rotational property stopped the circle from rotating. In this case, it is not working. Is there another way that I can get the image to not rotate throughout the path? This is my first project designing something for the web.

Answer 1

.deform  {
width: 200px;
height: 200px;
-webkit-transform: scaleX(3);
background-color: lightblue;
left: 270px;
position: absolute;
top: 50px;
border-radius: 50%;
}

.rotate {
width: 100%;
height: 100%;
-webkit-animation: circle 10s infinite linear;    
-webkit-transform-origin: 50% 50%;
}

.counterrotate {
width: 50px;
height: 50px;
-webkit-animation: ccircle 10s infinite linear;    
}

.inner {
width: 50px;
height: 50px;
position: absolute;
left: 0px;
top: 0px;
background-color: red;
display: block;
-webkit-transform: scaleX(0.33);
 }

@-webkit-keyframes circle {
from {-webkit-transform: rotateZ(0deg)}
to {-webkit-transform: rotateZ(360deg)}
}

@-webkit-keyframes ccircle {
from {-webkit-transform: rotateZ(360deg)}
to {-webkit-transform: rotateZ(0deg)}
}

Check here.