38

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. enter image description here

Rich Bradshaw
  • 71,795
  • 44
  • 182
  • 241
Arron Hunt
  • 391
  • 1
  • 3
  • 6
  • If the context allows you may be able to use CSS3's [rounded corners](http://www.css3.info/preview/rounded-border/) and border transparencies to fake a colored parabola. – taz Jan 06 '12 at 18:40

3 Answers3

33

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/

mwal
  • 2,803
  • 26
  • 34
kizu
  • 42,604
  • 4
  • 68
  • 95
  • 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. – Jasper Nov 22 '13 at 20:32
13

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>
TylerH
  • 20,799
  • 66
  • 75
  • 101
Ivan Castellanos
  • 8,041
  • 1
  • 47
  • 42
  • 1
    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](http://jsfiddle.net/LuArL/) – Graham P Heath May 28 '14 at 18:21
4

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.

Michael Mullany
  • 30,283
  • 6
  • 81
  • 105