Menu
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. 
651
CSS3 allows us to manipulate objects in 2D space by the use of the tranform property and its functions for 2D transformations.
The CSS translate() function is used to move elements in a two-dimensional space. It moves the position of the element on the plane by the amount provided by tx and ty . The translate() function accepts two arguments, indicating how much to move the element along the x and y axes respectively.
CSS Shapes It's possible to draw circles and arcs in CSS by simply creating a square <div> and setting border-radius to 50%. Each side of the border can take a different color or can be set to transparent . The background-color property sets the shape's fill, if any.
The translate() CSS function repositions an element in the horizontal and/or vertical directions. Its result is a <transform-function> data type.
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/
129
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
