CSS3 Translate across an Arc

Question

Is it at all possible with current CSS3 to translate an object (specifically a DIV) along an arc or curve? Here's an image to help illustrate.

Nawrocki

If the context allows you may be able to use CSS3's rounded corners and border transparencies to fake a colored parabola. – Anthodium

Answer 1

You can use nested elements and make the wrapper and inner element rotate in opposite directions so that the rotation of the inner element compensates for the rotation of the wrapper.

If you don't need to keep the nested element horizontal, you can omit the inner rotation.

Here is a 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>

Also, Lea Verou wrote an article on this issue with a way that use only one element: http://lea.verou.me/2012/02/moving-an-element-along-a-circle/

Monney

Great answer, really allowed me to bust outta the box I was in with animations and realize how much more can be done with relative animations. – Ekg

Answer 2

Yes, that animation can be created using the transform-origin CSS3 property to set the rotation point in the far right so it moves like that.

Check it out: http://jsfiddle.net/Q9nGn/4/ (put your mouse over)

#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>

Chickweed

To keep the animation going, you can compensate for the change in transform-origin with just a little math, so you could keep animating along different paths. Fiddle – Guidry

Answer 3

An alternative to moving the transform origin, is to use a double nested element where an x-transform is applied to the outer container, and a y-transform with an appropriate easing curve is applied to the inner container.

Virtue