para - CSS3 Traducir a través de un arco

traductor de inglés a español

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 . Stack Snippet:

/* Arc movement */

.wrapper {
 width: 500px;
 margin: 300px 0 0;
 transition: all 1s;
 transform-origin: 50% 50%;
}
.inner {
 display: inline-block;
 padding: 1em;
 transition: transform 1s;
 background: lime;
}
html:hover .wrapper {
 transform: rotate(180deg);
}
html:hover .inner {
 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 usa solo un elemento: http://lea.verou.me/2012/02/moving-an-element-along-a-circle/

Answer 2

Sí, esa animación se puede crear usando la propiedad CSS3 de origen de transformación para establecer el punto de rotación en el extremo derecho, de modo que se mueva así.

Compruébelo: http://jsfiddle.net/Q9nGn/4/ (pase el mouse)

#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 de la transformación, es usar un elemento anidado doble donde se aplica una transformación x al contenedor externo, y se aplica una transformación y con una curva suavizadora apropiada al contenedor interno.