如何使用 CSS 和 jQuery 有效地旋转多个对象成一圈？

使用 CSS 旋转多个对象在一个圆圈中：综合指南

在本文中，我们探讨了在一个圆圈中旋转多个对象的挑战。使用 CSS 的圆形图案。我们将深入研究实现细节，并提出一个强大的 Jquery 解决方案，可以处理任意数量的外部项目。

理解旋转机制

CSS 提供了转换属性，它允许我们对元素应用各种变换，包括旋转。 rotateZ(angle) 函数绕 Z 轴旋转元素，创建所需的圆周运动。

演示和实现

为了说明这个概念，我们将使用以下 HTML 和 CSS 代码：

<div class="outCircle">
  <div class="rotate">
    <div class="inner">hello</div>
  </div>
</div>

.outCircle {
  width: 200px;
  height: 200px;
  left: 270px;
  position: absolute;
  top: 50px;
  border-radius: 100px;
}
.rotate {
  width: 100%;
  height: 100%;
  -webkit-animation: circle 10s infinite linear;
}
.inner {
  width: 100px;
  height: 100px;
  background: red;
  border-radius: 50px;
  position: absolute;
  left: 0px;
  top: 0px;
  background-color: red;
  display: block;
}
@-webkit-keyframes circle {
  from {
    -webkit-transform: rotateZ(0deg)
  }
  to {
    -webkit-transform: rotateZ(360deg)
  }
}

此代码成功将单个对象旋转成圆圈。然而，扩展它来旋转多个对象可能会很棘手。

动态旋转的 Jquery 解决方案

旋转多个对象的关键是计算它们绕圆的位置并应用适当的转换。下面的 Jquery 解决方案可以优雅地处理这个问题：

var radius = 100;
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);
  $(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);
  }
}

解决方案的主要特点：

• 动态定位： Jquery脚本根据半径和数量计算并更新所有物体的位置
• 任意数量的项目：它通过动态调整它们之间的角度间距来处理任意数量的外部项目。
• 精确对齐：该脚本确保所有项目在
• 自定义：可以轻松调整半径和旋转速度，以满足不同的需求。

结论

虽然使用 CSS 旋转多个对象一开始可能会很困难，但本文中介绍的 Jquery 解决方案提供了一种强大且通用的方法。它使开发人员只需几行代码即可轻松创建引人注目的圆形动画。

以上是如何使用 CSS 和 jQuery 有效地旋转多个对象成一圈？的详细内容。更多信息请关注PHP中文网其他相关文章！