CSS3 Traducir a través de un arco

Question

¿Es posible con el CSS3 actual traducir un objeto (específicamente un DIV) a lo largo de un arco o curva? Aquí hay una imagen para ayudar a ilustrar.

Answer 1

Puede usar elementos anidados y hacer que la envoltura y el elemento interior giren en direcciones opuestas de modo que la rotación del elemento interno compense la rotación de la envoltura.

Si no necesita mantener horizontal el elemento anidado, puede omitir la rotación interna.

Aquí hay un Dabblet. Pila Fragmento:

/* Arc movement */ 
 

 
.wrapper { 
 
\t width: 500px; 
 
\t margin: 300px 0 0; 
 
\t transition: all 1s; 
 
\t transform-origin: 50% 50%; 
 
} 
 
.inner { 
 
\t display: inline-block; 
 
\t padding: 1em; 
 
\t transition: transform 1s; 
 
\t background: lime; 
 
} 
 
html:hover .wrapper { 
 
\t transform: rotate(180deg); 
 
} 
 
html:hover .inner { 
 
\t transform: rotate(-180deg); 
 
}

<div class="wrapper"> 
 
    <div class="inner">Hover me</div> 
 
</div>

Además, Lea Verou escribió un artículo sobre este tema con una forma que utiliza un solo elemento: http://lea.verou.me/2012/02/moving-an-element-along-a-circle/

Answer 2

Sí, que la animación se puede crear utilizando la propiedad transform origen CSS3 para establecer el punto de rotación en el extremo derecho lo que se mueve de esa manera.

Compruébelo usted mismo: http://jsfiddle.net/Q9nGn/4/(poner el mouse sobre)

#c { 
 
    border: 1px solid black; 
 
    height: 400px; 
 
} 
 

 
#c:hover #m { 
 
    -webkit-transform: rotate(180deg); 
 
    -webkit-transition: all 1s ease-in-out; 
 
    -moz-transform: rotate(180deg); 
 
    -moz-transition: all 1s ease-in-out; 
 
    -o-transform: rotate(180deg); 
 
    -o-transition: all 1s ease-in-out; 
 
    -ms-transform: rotate(180deg); 
 
    -ms-transition: all 1s ease-in-out; 
 
    transform: rotate(180deg); 
 
    transition: all 1s ease-in-out; 
 
} 
 

 
#m { 
 
    width: 60px; 
 
    height: 60px; 
 
    position: absolute; 
 
    background: green; 
 
    border-radius: 30px; 
 
    top: 270px; 
 
    left: 20px; 
 
    -webkit-transform-origin:300px 30px; 
 
    -moz-transform-origin:300px 30px; 
 
    -o-transform-origin:300px 30px; 
 
    -ms-transform-origin:300px 30px; 
 
    transform-origin:300px 30px; 
 
}

<div id="c"> 
 
    <div id="m"></div> 
 
</div>

Answer 3

Una alternativa para mover el origen transformar, es el uso de un doble elemento anidado, donde transformada x una se aplica al contenedor externo, y se aplica una transformación y con una curva de suavización apropiada al contenedor interno.