Wie man Bild in elliptischer Form dreht, ohne das Bild zu drehen CSS

Question

Ich habe eine jfiddle here, in der ich ein Bild in einer elliptischen Form drehe. Ich möchte jedoch nicht, dass das Bild gleichzeitig rotiert.

Um dies zu korrigieren, habe ich die Dreh -webkit-keyframes mO mit den folgenden Eigenschaften:

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

Da in früheren Versuchen eine elliptische Rotation zu erhalten, die entgegengesetzte Dreh-Eigenschaft an einer Drehung um den Kreis gestoppt. In diesem Fall funktioniert es nicht. Gibt es eine andere Möglichkeit, dass das Bild nicht über den gesamten Pfad rotiert? Dies ist mein erstes Projekt, das etwas für das Web gestaltet.

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.