Css3 Translate Across an Arc

CSS3 Translate across an Arc

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>

Css animation across an Arc

I've forked the (very good) @ArunBertil "fulcrum" solution to convert it to CSS3 Animation:

Running Demo

CSS

@keyframes drawArc1 {
    0%   { transform: rotate(180deg);  }
    100% { transform: rotate(0deg);    }
}

@keyframes drawArc2 {
    0%   { transform: rotate(-180deg); }
    100% { transform: rotate(0deg);    }
}

body{
    padding: 150px;    
    background: black;
}

.wrapper {
    width: 300px;
    animation: drawArc1 3s linear infinite;
}

.inner {    
    border-radius: 50%;
    display: inline-block;
    padding: 30px;    
    background: yellowgreen;
    animation: drawArc2 3s linear infinite;
}

HTML

<div class="wrapper">
    <div class="inner"></div>
</div>

Watch it on FireFox... to run it on other browsers, simply put the prefixes (@-webkit-keyframes, etc)

CSS3 animation - arc between 2 elements

If you manage to get a div to extend the distance that you want to cover, this solution can work:

set 2 animations, one for horizontal axis, and another for the vertical axis

.container {

  width: 400px;

  height: 100px;

  border: solid 1px blue;

  position: relative;

}

.container:nth-child(2) {

  width: 800px;

}

.inner {

  width: 25px;

  height: 25px;

  background-color: green;

  border-radius: 100%;

  animation-name: arctop, arcleft;

  animation-duration: 2s, 2s;

  animation-timing-function: linear, linear;

  animation-iteration-count: infinite, infinite;

  position: absolute;

}

@keyframes arctop {

  0% {top: 75px; animation-timing-function: ease-out;}

  50% {top: 0px; animation-timing-function: ease-in;}

  100% {top: 75px;}

}

@keyframes arcleft {

  0% {left: 0px;}

  100% {left: calc(100% - 25px)}

}

<div class="container">

    <div class="inner"></div>

</div>

<div class="container">

    <div class="inner"></div>

</div>

CSS - Animate object in curved path

Maybe make parent element move by rotate and children (in my case pseudoelement, whatever) make position absolute to the parent. And just use animation. Look at my solution. Maybe you will have to create some wrapper and use overflow: hidden, because it is square which is rotating. You can watch square's behavior by adding background-color.

@keyframes move-sun {

  from {

    transform: rotate(0deg);

  }

  

  to {

    transform: rotate(90deg);

  }

}

.sun {

  position: relative;

  width: 400px;

  height: 400px;

  margin: 200px;

  transform: rotate(90deg);

  animation: move-sun 10s;

}

.sun::before {

  content: "";

  position: absolute;

  top: -25px;

  left: -25px;

  width: 50px;

  height: 50px;

  background-color: #ff0;

  border-radius: 50%;

}

<div class="sun">

</div>

CSS3 Translate % Units?

Simple answer - that is in fact the right behavior. If you want to use relative units in translate transforms consider using viewport length units instead.

Div elements to follow a curved path with CSS3

Finding points on ellipse and translating:

If your oblong circle resembles an ellipse then you can find points on the ellipse using mathematical formula and then translate each div element to that particular point.

Mathematical formula for calculating point (x,y) on an ellipse is(a * cos(t), b * sin(t)). In this formula, a represents the radius of the ellipse in x-axis, b represents the radius of the ellipse in the y-axis and t represents the angle in radians. Angle in radians = Angle in degrees * pi / 180.

To make use of this approach, we do the following:

Place the div elements absolutely at the centre point of the ellipse.
Calculate the (x,y) corresponding to each angle and translate the div to its place by using transform: translateX(...) translateY(...). The angles are in steps of 22.5 deg because there are a total 9 elements to be placed within 180 degrees.

.container {

  position: relative;

  height: 400px;

  width: 600px;

  padding: 12.5px;

  border: 1px solid;

  border-radius: 50%;

}

div > div {

  position: absolute;

  top: 0px;

  left: 0px;

  height: 50%;

  width: 50%;

  transform-origin: bottom right;

}

div > div:after {

  position: absolute;

  content: '';

  bottom: 0px;

  right: 0px;

  height: 25px;

  width: 25px;

  background: black;

  border-radius: 50%;

  transform: translateX(50%) translateY(50%);

}

div > div:after {

  background: red;

}

div > div:nth-child(n+4):after {

  background: orange;

}

div > div:nth-child(n+7):after {

  background: green;

}

div > div:nth-child(1) {

  transform: translateX(-300px) translateY(0px);

}

div > div:nth-child(2) {

  transform: translateX(-277.17px) translateY(-76.5px);

}

div > div:nth-child(3) {

  transform: translateX(-212.13px) translateY(-141.42px);

}

div > div:nth-child(4) {

  transform: translateX(-114.80px) translateY(-184.77px);

}

div > div:nth-child(5) {

  transform: translateX(0px) translateY(-200px);

}

div > div:nth-child(6) {

  transform: translateX(114.80px) translateY(-184.77px);

}

div > div:nth-child(7) {

  transform: translateX(212.13px) translateY(-141.42px);

}

div > div:nth-child(8) {

  transform: translateX(277.17px) translateY(-76.5px);

}

div > div:nth-child(9) {

  transform: translateX(300px) translateY(0px);

}

<div class="container">

  <div></div>

  <div></div>

  <div></div>

  <div></div>

  <div></div>

  <div></div>

  <div></div>

  <div></div>

  <div></div>

</div>

Moving a div along a circular path using HTML/JavaScript/CSS

You can achieve this with pure css3. Write like this:

CSS

.dot{
    position:absolute;
    top:0;
    left:0;
    width:50px;
    height:50px;
    background:red;
    border-radius:50%;
}
.sun{
    width:200px;
    height:200px;
    position:absolute;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    -webkit-animation-name:orbit;
    -webkit-animation-duration:5s;
    top:50px;
    left:50px;
}

@-webkit-keyframes orbit { 
from { -webkit-transform:rotate(0deg) } 
to { -webkit-transform:rotate(360deg) } 
}

HTML

<div class="sun">
 <div class="dot"></div>
</div>

Check this http://jsfiddle.net/r4AFV/

UPDATED

http://jsfiddle.net/r4AFV/1/

Creating a curved div using only CSS

I stumbled across an interesting article in CSS Tricks. I don't think there's a way to do what you want with a complex div, but if you just wanted banner text. This is not a perfect answer, but I think it's the closest you might get. It's really just an illusion of a manipulated div, not the actual thing.

But anyway... I managed to tweak their code a bit like this:

.badge {

  position: relative;

  width: 400px;

  border-radius: 50%;

  transform: rotate(-50deg);

}

h1 span {

background-color: lightblue;

  font: 26px Monaco, MonoSpace;

  height: 40px;

  position: absolute;

  width: 20px;

  left: 0;

  top: 0;

  transform-origin: center 190px;

}

.char1 {

  transform: rotate(6deg);

}

.char2 {

  transform: rotate(12deg);

}

.char3 {

  transform: rotate(18deg);

}

.char4 {

  transform: rotate(24deg);

}

.char5 {

  transform: rotate(30deg);

}

.char6 {

  transform: rotate(36deg);

}

.char7 {

  transform: rotate(42deg);

}

.char8 {

  transform: rotate(48deg);

}

.char9 {

  transform: rotate(54deg);

}

.char10 {

  transform: rotate(60deg);

}

.char11 {

  transform: rotate(66deg);

}

.char12 {

  transform: rotate(72deg);

}

.char13 {

  transform: rotate(78deg);

}

.char14 {

  transform: rotate(84deg);

}

.char15 {

  transform: rotate(90deg);

}

.char16 {

  transform: rotate(96deg);

}

.char17 {

  transform: rotate(102deg);

}

.char18 {

  transform: rotate(108deg);

}

.char19 {

  transform: rotate(114deg);

}

.char20 {

  transform: rotate(120deg);

}

.char21 {

  transform: rotate(126deg);

}

.char22 {

  transform: rotate(132deg);

}

.char23 {

  transform: rotate(138deg);

}

.char24 {

  transform: rotate(144deg);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="page-wrap">

  

  <div class="badge">

    <h1>

        <span class="char1">E</span>

        <span class="char2">s</span>

        <span class="char3">t</span>

        <span class="char4">a</span>

        <span class="char5">b</span>

        <span class="char6">l</span>

        <span class="char7">i</span>

        <span class="char8">s</span>

        <span class="char9">h</span>

        <span class="char10">e</span>

        <span class="char11">d</span>

        <span class="char12"> </span>

        <span class="char13">2</span>

        <span class="char14">0</span>

        <span class="char15">1</span>

        <span class="char16">2</span>

      </h1>

  </div>

 

 </div>

Css3 Translate Across an Arc