37
È 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. 
CSS3 Traduci su un arco
A
risposta
27
È 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/
+0
Ottima risposta, mi ha davvero permesso di uscire dalla scatola in cui mi trovavo con le animazioni e rendermi conto di quanto ancora si può fare con le animazioni relative. – Jasper
11
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>+1
Per mantenere attiva l'animazione, è possibile compensare la modifica in "transform-origin" con un po 'di matematica, in modo da poter continuare ad animare su percorsi diversi. [Fiddle] (http://jsfiddle.net/LuArL/) –
4
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.
Se il contesto lo permette si può essere in grado di utilizzare CSS3 di [angoli arrotondati] (http://www.css3.info/preview/rounded-border/) e bordi trasparenti per simulare una parabola colorata. – taz