CSS3 Traduci su un arco

Question

È possibile con gli attuali CSS3 tradurre un oggetto (in particolare un DIV) lungo un arco o una curva? Ecco un'immagine per aiutarti a illustrare.

Answer 1

È possibile utilizzare elementi nidificati e far ruotare l'involucro e l'elemento interno in direzioni opposte in modo che la rotazione dell'elemento interno compensi la rotazione dell'involucro.

Se non è necessario mantenere orizzontale l'elemento nidificato, è possibile omettere la rotazione interna.

Questo è un Dabblet. Stack Snippet:

/* 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>

Inoltre, Lea Verou ha scritto un articolo su questo tema con un modo che usa un solo elemento: http://lea.verou.me/2012/02/moving-an-element-along-a-circle/

Answer 2

Sì, che l'animazione può essere creato utilizzando la proprietà CSS3 trasformare origine per impostare il punto di rotazione in fondo a destra in modo che si muove così.

Check it out: http://jsfiddle.net/Q9nGn/4/(mettere il mouse sopra)

#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

Un'alternativa a spostare l'origine trasformare, è quello di utilizzare un doppio elemento nidificato dove un x-transform viene applicato al contenitore esterno e al contenitore interno viene applicata una trasformazione y con una curva di andamento appropriata.