How can I make my elements or objects rotate 360 degrees close together and inside the parent element in CSS?

user_18127881 0
Viewed 453

https://codepen.io/jenny0515/pen/JjOmVeL

Please check my code in the link above!

How can I make them rotate closer together and stay within the rectangle while going in circular motion in CSS? That doesn't mean I want the scroll option in the main div/rectangle; I just want to be able to see the cubes rotate in circular motion closer to each other. So, they should circle near the circle in the center of the rectangle.

Here's a small preview of my CSS code found in the link:

.aqua-6s{
  -webkit-animation: aqua linear infinite 6s;

  -moz-animation: aqua linear infinite 6s;
  -o-animation: aqua linear infinite 6s; 
  -ms-animation: aqua linear infinite 6s; 
  animation: aqua linear infinite 6s;

  -webkit-transform-origin: 50% 50%;
}

Is there anything missing in the animations that will help me accomplish getting the cubes rotating near the circle and within the div? But please check the link, since everything's there; it would mean a lot!

css
1 Answers

There are multiple ways to achieve, Simplest is to

  1. Set position:absolute; on circle and 3 squares and bring them all to the one point, center of their parent for example.
  2. Move our squares 200px to the left (left: calc(50% - 200px)) and set transform-origin: 200px.
  3. Add animation.

enter image description here

enter image description here

enter image description here

*{box-sizing: border-box;}
.div{
  height: 500px;
  width: 100%; 
  border: 5px solid;
  overflow: hidden;//remove later;
  position: relative;
}
.div .circle{
  position:absolute;
  width: 24px;
  height: 24px;
  left: calc(50% - 12px);
  top: calc(50% - 12px);
  border-radius: 50%;
  border: 3px solid red;
}
.div .square{
  position:absolute;
  width: 48px;
  height: 48px;
  left: calc(50% - 200px);
  top: calc(50% - 24px);
  border: 3px solid red;
  animation: rotate linear infinite 6s;
  transform-origin: 200px ;
}
.div .square:nth-of-type(2){
  animation-delay: 2s;
  border-color: green;
}
.div .square:nth-of-type(3){
  animation-delay: 4s;
  border-color: blue;
}



@keyframes rotate{
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
<div class= div>
  <div class="circle"></div>
  <div class="square "></div>
  <div class="square "></div>
  <div class="square "></div>
</div>

user_68999250
Related