Moviendo un div a lo largo de una ruta circular usando HTML/JavaScript/CSS

Question

Me gustaría mover un círculo a lo largo de una ruta circular usando HTML/CSS/JavaScript. ¿Hay una manera de lograr esto? se añade el código de círculo a continuación:

.circle{ 
    width:50px; 
    height:50px; 
    display:block; 
    border-radius:50px; 
    -moz-border-radius:50px; 
    -webkit-border-radius:50px; 
    -khtml-border-radius:50px; 
    color:#fff; 
    background-color:#b9c1de; 

} 

<div class="circle"></div> 

Answer 1

Puede lograr esto con pure css3. Escribe así:

CSS

.dot{ 
    position:absolute; 
    top:0; 
    left:0; 
    width:50px; 
    height:50px; 
    background:red; 
    border-radius:50%; 
} 
.sun{ 
    width:200px; 
    height:200px; 
    position:absolute; 
    -webkit-animation-iteration-count:infinite; 
    -webkit-animation-timing-function:linear; 
    -webkit-animation-name:orbit; 
    -webkit-animation-duration:5s; 
    top:50px; 
    left:50px; 
} 

@-webkit-keyframes orbit { 
from { -webkit-transform:rotate(0deg) } 
to { -webkit-transform:rotate(360deg) } 
} 

HTML

<div class="sun"> 
<div class="dot"></div> 
</div>​ 

Marque esta http://jsfiddle.net/r4AFV/

ACTUALIZADO

http://jsfiddle.net/r4AFV/1/

Answer 2

Hey esto no es mi código,

pero consulte este enlace puede ser útil para usted

http://jsfiddle.net/W69s6/20/

Answer 3

Es Tiempo de la matemáticas!

function circle(){ 
    var width = 10, 
     height = 10, 
     offsetX = 100, 
     offsetY = 100, 
     x = Math.cos(new Date()) * width + offsetX; //Remember high school? 
     y = Math.sin(new Date()) * height + offsetY; 

    //Do whatever you want here with the coordinates. 
    document.getElementsByClassName("circle")[0].style.left = x; 
    document.getElementsByClassName("circle")[0].style.top = y; 

    setTimeout(circle, 50); 
} 

Answer 4

Aquí hay una solución de JavaScript pura que lancé. Debería tener un soporte de navegador muy bueno (no se requiere CSS3). Es altamente configurable. Asegúrese de consultar las opciones de configuración en el inferior de la sección de JavaScript. No se requiere biblioteca

http://jsfiddle.net/nN7ct/

Answer 5

Hay 2 maneras de mover un contenedor div en una trayectoria circular con CSS:

1) Animación de la CSS transformar la propiedad:
El elemento que ha de ser girado debe tener un elemento padre. Ahora, si desea mover al niño 60 grados, primero gire el elemento principal 60 grados y luego gire el niño 60 grados (un ángulo opuesto para que el niño no se vea invertido).
Utilice transición de CSS, animación CSS o API de animaciones web para realizar la animación.

Sobre el siguiente código:
La matriz tiene un posicionamiento relativo. También hágala circular dando la misma altura, ancho, radio de borde = 50%
El niño tiene posición absoluta. Se le ha dado una altura de & ancho, arriba & propiedades a la izquierda para que aparezca en la mitad superior del elemento principal.

#parent { 
    position: relative; 
    width: 300px; 
    height: 300px; 
    border: 1px solid rgba(0,0,0,0.1); 
    border-radius: 50%; 
    transform: rotate(0deg); 
    transition: transform 0.7s linear; 
} 

#child { 
    position: absolute; 
    width: 80px; 
    height: 80px; 
    transform: rotate(0deg); 
    transition: transform 0.7s linear; 
    top: -40px; 
    left: 110px; 
    border: 1px solid black; 
} 

$("#button").on('click', function() { 
    $("#parent").css({ transform: 'rotate(60deg)' }); 
    $("#child").css({ transform: 'rotate(-60deg)' }); 
}); 

http://usefulangle.com/post/32/moving-an-element-in-circular-path-with-css es una publicación de blog que escribí. También contiene una demostración.

2) Animación de la propiedad CSS-offset de posición:
Con la nueva trayectoria de movimiento CSS o Ruta de desvío, es posible animar un elemento largo de cualquier camino.Sin embargo, a partir de ahora (enero de 2017) solo funcionará en la última versión de Chrome.
Debe definir una ruta SVG circular con la propiedad offset-path. A continuación, anime la propiedad distancia-desplazamiento sobre esta ruta usando transición CSS, animación CSS o API de Web Animations.
Además de definir una ruta SVG, puede proporcionar el conjunto offset-path: margin-box. Esto definirá la ruta como el límite de margen del padre. Si el padre se ha hecho circular con radio de borde, la ruta también será circular.

#child { 
    offset-path: margin-box; 
} 

Ver http://usefulangle.com/post/33/moving-element-in-circular-path-with-css-offset-path para la entrada del blog relacionadas con la negociación de animación circular con trayectoria de movimiento.