How can I make an element start rotating 360 degrees following a specific element? With the code shown below, I'm rotating each element but they don't follow each other, they don't rotate together in circular motion. For example, the lime element/fourth div should rotate downward so that it can be right in front of the aqua element continuously as it rotates, not starting upward, as it currently does. Basically, each element should follow the aqua element in circular motion. How would I be able to change the direction in which the elements other than the aqua element rotate?
Check out my code, please:
<html>
<head>
<title>Practice</title>
<meta charset="utf-8">
</head>
<style>
first div{
height: 50px;
width: 50px;
margin-top: 60px;
border: 5px solid;
background-color: aqua;
position: relative;
left: 600px;
bottom: -30px;
transform-origin: 200% center;
animation: rotate-aqua 6s linear infinite;
}
second div{
height: 50px;
width: 50px;
border: 5px solid;
background-color: violet;
position: relative;
left: 700px;
bottom: -60px;
transform-origin: 200% center;
animation: rotate-violet 6s linear infinite;
}
third div{
height: 50px;
width: 50px;
border: 5px solid;
background-color: aquamarine;
position: relative;
left: 800px;
bottom: 90px;
transform-origin: 200% center;
animation: rotate-greenish 6s linear infinite;
}
fourth div{
height: 50px;
width: 50px;
border: 5px solid;
background-color: chartreuse;
position: relative;
left: 700px;
bottom: 235px;
transform-origin: 200% center;
animation: rotate-lime 6s linear infinite;
}
@keyframes rotate-aqua{
100%{
transform: rotate(360deg);
}
}
@keyframes rotate-greenish{
100%{
transform: rotate(360deg);
}
}
@keyframes rotate-violet{
100%{
transform: rotate(360deg);
}
}
@keyframes rotate-lime{
100%{
transform: rotate(360deg);
}
}
</style>
<body>
<first>
<div>
</div>
</first>
<second>
<div>
</div>
</second>
<third>
<div>
</div>
</third>
<fourth>
<div>
</div>
</fourth>
</body>
</html>
