Rotate objects around circle using CSS?

.outCircle  {
    width: 200px;
    height: 200px;
    background-color: lightblue;
    left: 270px;
    position: absolute;
    top: 50px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	border-radius: 100px;
}

.duringTwentyOne {
  -webkit-animation-duration: 21s;
}

.duringTen {
  -webkit-animation-duration: 10s;
}

.duringFour {
  -webkit-animation-duration: 4s;
}

.infinite {
   -webkit-animation-iteration-count: infinite;
}

.linear {
   -webkit-animation-timing-function: linear;
}

.counter {
   width: 50px;
   height: 50px;
   -webkit-animation-duration: inherit;
   -webkit-animation-direction: reverse;
   -webkit-animation-timing-function: inherit;
   -webkit-animation-iteration-count: inherit;
   -webkit-animation-name: inherit;
}

.rotate {
    width: 100%;
    height: 100%;
    -webkit-animation-name: circle;
    position: relative;
    z-index : 10;
    display : block;
}

.second {
  top : -100%;
}

.thirdBigger {
  top : -240%;
  left: -40%;
  width:150%;
  height: 150%;
}
  
.inner {
    width: 100px;
	height: 100px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 100px;
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: red;
    display: block;

}

.red {
  	background: red;
}

.green {
  	background: green;
}


@keyframes circle {
    from {-webkit-transform: rotateZ(0deg)}
    to {-webkit-transform: rotateZ(360deg)}
}

<div class="outCircle">
  <div class="rotate linear infinite duringTen">
    <div class="counter">
      <div class="inner">hello
      </div>
    </div>
  </div>
  <div class="second rotate linear infinite duringFour">
    <div class="counter">
      <div class="inner red">bye bye
      </div>
    </div>
  </div>
  <div class="thirdBigger rotate linear infinite duringTwentyOne">
    <div class="counter">
      <div class="inner green">s'up
      </div>
    </div>
  </div>
</div>

var radius = 100; // adjust to move out items in and out 
var fields = $('.item'),
  container = $('#container'),
  width = container.width(),
  height = container.height();
var angle = 0,
  step = (2 * Math.PI) / fields.length;
fields.each(function() {
  var x = Math.round(width / 2 + radius * Math.cos(angle) - $(this).width() / 2);
  var y = Math.round(height / 2 + radius * Math.sin(angle) - $(this).height() / 2);
  if (window.console) {
    console.log($(this).text(), x, y);
  }
  $(this).css({
    left: x + 'px',
    top: y + 'px'
  });
  angle += step;
});

body {
  padding: 2em;
}
#container {
  width: 200px;
  height: 200px;
  margin: 10px auto;
  border: 1px solid #000;
  position: relative;
  border-radius: 50%;
  animation: spin 10s linear infinite;
}
.item {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  position: absolute;
  background: #f00;
  animation: spin 10s linear infinite reverse;
}
@keyframes spin {
  100% {
    transform: rotate(1turn);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>