Is there a way to rotate a div around a central element?

Question

Just wondering if there was a way to rotate a div around another div, the central element. I would like to rotate the 4 right, left, bottom, and bottom2 around the center div. Not just rotate around the center point of the element, but around a center point. Maybe some sort of function, or maybe a combination of translate and rotate? Just throwing some ideas out there, don't know how to do it though. In case you don't know, it's the tf2 logo!

.left {
       width: 90px;
      height: 90px;
      border-radius: 12rem  0 0;
      position: absolute;
      top: 100px;
      left: 210px;
      rotate: 7deg;
background: radial-gradient(circle, rgba(157,83,34,1) 0%, rgba(150,78,29,1) 100%);
      animation: idk 10s ;
      box-shadow: 1px 2px 2px #9d5322;
}
.right {
       width: 90px;
      height: 90px;
      border-radius: 12rem  0 0;
      position: absolute;
      top: 115px;
      left: 320px;
      rotate: 97deg;
background: radial-gradient(circle, rgba(157,83,34,1) 0%, rgba(150,78,29,1) 100%);
      animation: idk 10s ;
            box-shadow: 1px 2px 2px #9d5322;
}
html {
  background-color: black;
}
.bottom {
      width: 90px;
      height: 90px;
      border-radius: 12rem  0 0;
      position: absolute;
      top: 220px;
      left: 308px;
      rotate: 187deg;
background: radial-gradient(circle, rgba(157,83,34,1) 0%, rgba(150,78,29,1) 100%);
      animation: idk 10s;
      box-shadow: 1px 2px 2px #9d5322;
}
.bottom2 {
      width: 90px;
      height: 90px;
      border-radius: 12rem  0 0;
      position: absolute;
      top: 205px;
      left: 198px;
      rotate: 277deg;
background: radial-gradient(circle, rgba(157,83,34,1) 0%, rgba(150,78,29,1) 100%);
animation: idk 10s ;
      box-shadow: 1px 2px 2px #9d5322;
}
.center {
  width: 80px;
  height: 80px;
  background-color: black;
  position: absolute;
  top: 167px;
  left: 265px;
  border-radius: 50%;
}
@keyframes idk {
  0% {
    transform: translateY(10em);
    opacity: 0.1;
  }
  10% {
       opacity: 0.2;
       transform: rotateX(50deg);
  }
  20%{
    opacity: 0.3;
    transform: translateX(10em);
  }
  30% {
    opacity: 0.4;
  transform: rotate(360deg);
  }
  40%  {    
    opacity: 0.5;
  }
  50% {  
      opacity: 0.6;
  }
  60% {    
    opacity: 0.7;
  }
  70% {
    opacity: 0.8;
    transform: translateY(30px);
    transform: translateX(30px);
    transform: scale(0.8);
    transform: rotateX(30deg);
  }
  80% {
    opacity: 0.9;
    transform: translateY(-30px);
    transform: translateX(-30px);
    transform: scale(1);
  }
  90% {
      opacity: 1;
      transform: translate(1em 1em 1em);
      box-shadow: 10px 50px 50px;
  }
  95% {
    transform: scale(1.05);
  }
  100% {
  }
}

<div class="left" id="left"></div>
<div class="right" id="right"></div>
<div class="bottom"></div>
<div class="bottom2"> </div>
<div class="center" id="center"></div>
<hi> hi</hi>