使用CSS围绕圆旋转对象？

Question

我正在尝试使三个对象绕一个圆旋转。到目前为止，我已经能够使一个对象绕圆旋转。如果不弄乱代码，我将一无所获。谁能建议最好的方法来做到这一点？这是代码的一部分。谢谢！

.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;

}

.rotate {

  width: 100%;

  height: 100%;

  -webkit-animation: circle 10s infinite linear;

}

.counterrotate {

  width: 50px;

  height: 50px;

  -webkit-animation: ccircle 10s infinite linear;

}

.inner {

  width: 100px;

  height: 100px;

  background: red;

  -moz-border-radius: 50px;

  -webkit-border-radius: 50px;

  border-radius: 100px;

  position: absolute;

  left: 0px;

  top: 0px;

  background-color: red;

  display: block;

}

@-webkit-keyframes circle {

  from {

    -webkit-transform: rotateZ(0deg)

  }

  to {

    -webkit-transform: rotateZ(360deg)

  }

}

@-webkit-keyframes ccircle {

  from {

    -webkit-transform: rotateZ(360deg)

  }

  to {

    -webkit-transform: rotateZ(0deg)

  }

}


<div class="outCircle">

  <div class="rotate">

    <div class="counterrotate">

      <div class="inner">hello

      </div>

    </div>

  </div>

</div>

Answer 1

jQuery解决方案，适用于任意数量的外部项目。

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>