How to Rotate Multiple Objects Around a Circle Using CSS and JavaScript?

Rotating Multiple Objects Around a Circle Using CSS

In an attempt to create an animation where multiple objects rotate around a circle, it's encountered that only one object spins correctly. This article aims to provide guidance on resolving this issue to ensure all desired objects rotate seamlessly around the circle.

Existing Code and Implementation

The code provided involves an "outCircle" div that acts as the center of rotation, and within it, a nested "rotate" div contains the objects to be animated. Using CSS3 animation, the "rotate" div is configured to rotate indefinitely around the "outCircle." However, attempts to add additional objects within the "rotate" div result in undesired behavior.

Solution

To address this issue, a JavaScript-based approach is more suitable for handling multiple object rotation:

var radius = 100; // Adjust to place items closer or farther from the center
var fields = $('.item'); // Target the objects to be rotated
var container = $('#container'); // Parent div encasing the rotating objects
var width = container.width();
var height = container.height();
var angle = 0;
var step = (2 * Math.PI) / fields.length; // Calculate the angular separation between objects

fields.each(function() {
  // Calculate the coordinates for each object based on its position in the circle
  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 (console) {
    console.log($(this).text(), x, y); // Display coordinates for debugging
  }

  $(this).css({
    left: x + 'px', // Set the left position
    top: y + 'px', // Set the top position
  });

  // Increment the angle based on the spacing between objects
  angle += step;
});

Additional Considerations

Additionally, CSS3 can be used to configure the animation behavior:

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; //  Define the animation duration and direction
}

.item {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  position: absolute;
  background: #f00;
  animation: spin 10s linear infinite reverse; //  Reverse the animation for each object
}

@keyframes spin {
  100% {
    transform: rotate(1turn); //  Rotate the objects one full turn
  }
}

Example

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>

This approach provides a flexible and scalable solution for rotating any number of objects around a circle using CSS3 and JavaScript.

The above is the detailed content of How to Rotate Multiple Objects Around a Circle Using CSS and JavaScript?. For more information, please follow other related articles on the PHP Chinese website!