html – 使用CSS在圆圈周围旋转对象？

概述我试图围绕一个圆圈旋转三个物体.到目前为止,我已经能够让一个物体围绕圆圈旋转.如果不弄乱代码,我无法获得多个.任何人都可以建议最好的方法来实现这一目标吗？这是代码和小提琴的一部分.谢谢！ 这是Demo .outCircle { width: 200px; height: 200px; background-color: lightblue; left: 270px; posit 我试图围绕一个圆圈旋转三个物体.到目前为止,我已经能够让一个物体围绕圆圈旋转.如果不弄乱代码,我无法获得多个.任何人都可以建议最好的方法来实现这一目标吗？这是代码和小提琴的一部分.谢谢！

这是Demo

.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 >  <div >    <div >      <div >hello      </div>    </div>  </div></div>

解决方法 Jquery解决方案适用于任何数量的外部项目.

Jquery从ThiefMaster♦无耻地偷走了他们在Q & A的回答

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 >1</div>  <div >2</div>  <div >3</div>  <div >4</div>  <div >5</div>  <div >6</div></div>

总结

以上是内存溢出为你收集整理的html – 使用CSS在圆圈周围旋转对象？全部内容，希望文章能够帮你解决html – 使用CSS在圆圈周围旋转对象？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。