CSS trasformare per ruotare un elemento in un percorso ovale

Ho un jsfiddle qui - http://jsfiddle.net/w23v50h5/1/CSS trasformare per ruotare un elemento in un percorso ovale

 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); } 
     }

sto usando css trasform per spostare un elemento in una forma ovale.

Mi piacerebbe che il percorso su cui si muove l'elemento sia di forma ovale più piatta.

Mi piace anche ridimensionare l'elemento in modo che sia più piccolo nella parte superiore dell'ovale e più grande nella parte inferiore in modo da dare l'impressione dell'orbita ovale andando indietro e in avanti.

Qualcuno può aiutare a rendere l'orbita più piatta e scalare l'elemento.

fonte

2014-10-22 ttmt

ho trovato questo SO domanda che è simile che ha una demo di lavoro. http://stackoverflow.com/questions/17022491/how-rotate-an-image-around-on-oval-shape-image-in-css3-animation – crazymatt

Qual è il motivo per cui si utilizza ruotare (360 gradi) e ruotare (-360 gradi) nella stessa frase se posso chiedere? – Mortaza

è possibile utilizzare un% invece "da a" nell'animazione in questo modo:

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 implementazione: http://jsfiddle.net/jutmLgud/

fonte

2014-10-23 07:11:16 xzegga

CSS trasformare per ruotare un elemento in un percorso ovale

risposta

Problemi correlati