CODEWITHSUNDEEP
htmlcsstransitiongeometry
Cre3k
Cre3k

Reputation: 327

Spinning circles css3 transition

I want to make 3 spinning circles but I can`t find any examples.

How I need it to work: There are 3 circles (big,medium,small) I want to rotate them on hover (small and medium change position on big circuit)

IMG:

https://dl.dropboxusercontent.com/u/64675374/circle/circle1.png

Single img:

https://dl.dropboxusercontent.com/u/64675374/circle/small.png
https://dl.dropboxusercontent.com/u/64675374/circle/medium.png
https://dl.dropboxusercontent.com/u/64675374/circle/big.png

Here is for code for one circle. But how make a big circle a background of it and add medium circle

http://jsfiddle.net/AqKYC/293/

CSS:

.dot{
    position:absolute;
    top:0;
    left:0;
    width:300px;
    height:100%;
     background: url('https://dl.dropboxusercontent.com/u/64675374/circle/small.png') no-repeat 50% 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;
    -moz-animation-iteration-count:infinite;
    -moz-animation-timing-function:linear;
    -moz-animation-name:orbit;
    -moz-animation-duration:5s;
    top:50px;
    left:50px;
}
@-webkit-keyframes orbit { 
from { -webkit-transform:rotate(0deg) } 
to { -webkit-transform:rotate(360deg) } 
}
@-moz-keyframes orbit { 
from { -moz-transform:rotate(0deg) } 
to { -moz-transform:rotate(360deg) } 
}

HTML

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

Upvotes: 1

Views: 2597

Answers (1)

Ant&#243;nio Almeida
Ant&#243;nio Almeida

Reputation: 10087

Here is my approach to the problem:

Example at jsFiddle

First I placed the elements like this:

Image positions

The trick is to add the css attribute translateX(260px) that is (half of the biggest image circle/big.png), and then you just need to animate the rotation!

from { -transform: rotate(0deg) translateX(260px) }
to   { -transform: rotate(360deg) translateX(260px) }

Fullcode:

HTML:

<div class="loading">
    <div class="circle-small"></div>
    <div class="circle-medium"></div>
    <div class="circle-big"></div>
</div>

CSS: (shortned - webkit only, full code at jsFiddle)

.loading {
    width: 688px;
    height: 688px;
    position: relative;
}
.loading > div {
    position: absolute;
}
.circle-small {
    background-image: url('https://dl.dropboxusercontent.com/u/64675374/circle/small.png');
    width: 162px;
    height: 161px;
    margin-left: 348px;
    margin-top: 348px;
    -webkit-animation: myOrbit1 3s linear infinite;
}
.circle-medium {
    background-image: url('https://dl.dropboxusercontent.com/u/64675374/circle/medium.png');
    width: 338px;
    height: 339px;
    margin-left: 260px;
    margin-top: 260px;
    -webkit-animation: myOrbit2 4s linear infinite;
}
.circle-big {
    background-image: url('https://dl.dropboxusercontent.com/u/64675374/circle/big.png');
    width: 518px;
    height: 517px;
    margin-left: 170px;
    margin-top: 170px;
}

@-webkit-keyframes myOrbit1 {
    from { -webkit-transform: rotate(0deg) translateX(260px) rotate(0deg); }
    to   { -webkit-transform: rotate(360deg) translateX(260px) rotate(-360deg); }
}
@-webkit-keyframes myOrbit2 {
    from { -webkit-transform: rotate(360deg) translateX(260px) rotate(0deg); }
    to   { -webkit-transform: rotate(0deg) translateX(260px) rotate(-360deg); }
}

Upvotes: 1

Related Questions