CSS-Transformation ein Element in einem ovalen Weg zu drehen

Ich habe einen jsfiddle hier - http://jsfiddle.net/w23v50h5/1/CSS-Transformation ein Element in einem ovalen Weg zu drehen

 div { 
      position: absolute; 
      left: 315px; 
      top: 143px; 
      width: 50px; 
      height: 50px; 
      background: red; 

      -webkit-animation: myOrbit 6s linear infinite; 
       -moz-animation: myOrbit 6s linear infinite; 
       -o-animation: myOrbit 6s linear infinite; 
        animation: myOrbit 6s linear infinite; 

     } 

     @-webkit-keyframes myOrbit { 
      from { -webkit-transform: rotate(0deg) translateX(5px) translateY(120px) rotate(0deg);} 
      to { -webkit-transform: rotate(360deg) translateX(5px) translateY(120px) rotate(-360deg); } 
     } 

     @-moz-keyframes myOrbit { 
      from { -moz-transform: rotate(0deg) translateX(100px) rotate(0deg); } 
      to { -moz-transform: rotate(360deg) translateX(100px) rotate(-360deg); } 
     } 

     @-o-keyframes myOrbit { 
      from { -o-transform: rotate(0deg) translateX(100px) rotate(0deg); } 
      to { -o-transform: rotate(360deg) translateX(100px) rotate(-360deg); } 
     } 

     @keyframes myOrbit { 
      from { transform: rotate(0deg) translateX(100px) rotate(0deg); } 
      to { transform: rotate(360deg) translateX(100px) rotate(-360deg); } 
     }

I CSS Transform bin mit einem Element in einer ovalen Form zu bewegen.

Ich möchte, dass der Pfad, auf dem sich das Element bewegt, eine flachere ovale Form hat.

Ich mag es auch, das Element so zu skalieren, dass es an der Spitze des Ovals kleiner und am Boden größer ist, so dass es den Eindruck einer ovalen Umlaufbahn gibt, die rückwärts und vorwärts geht.

Kann jemand helfen, die Bahn flacher zu machen und das Element zu skalieren.

Quelle

2014-10-22 ttmt

fand ich diese Frage, so dass ähnlich ist, dass eine Arbeits Demo hat. http://stackoverflow.com/questions/17022491/how-rotate-an-image-around-on-oval-shape-image-in-css3-animation – crazymatt

Was ist der Grund, dass Sie drehen (360 Grad) und drehen (-360deg) im selben Satz, wenn ich fragen darf? – Mortaza

können Sie eine% statt "von bis" in der Animation wie folgen verwenden:

0% { -webkit-transform: rotate(0deg) translateX(5px) translateY(120px) rotate(0deg) scale(1); } 
25% { -webkit-transform: rotate(90deg) translateX(5px) translateY(120px) rotate(-90deg) scale(.75); } 
50% { -webkit-transform: rotate(180deg) translateX(5px) translateY(120px) rotate(-180deg) scale(.60); } 
75% { -webkit-transform: rotate(270deg) translateX(5px) translateY(120px) rotate(-270deg) scale(.75); } 
100% { -webkit-transform: rotate(360deg) translateX(5px) translateY(120px) rotate(-360deg) scale(1); }

A jsfiddle Umsetzung: http://jsfiddle.net/jutmLgud/

Quelle

2014-10-23 07:11:16 xzegga

CSS-Transformation ein Element in einem ovalen Weg zu drehen

Antwort

Verwandte Themen