CSS와 jQuery를 사용하여 원 주위로 여러 개체를 회전하는 방법은 무엇입니까?

CSS를 사용하여 원 주위로 여러 개체 회전

CSS를 사용하면 원 주위로 단일 개체를 회전할 수 있지만 여러 개체를 회전하려고 할 때 문제가 발생합니다. 동시에. 다음은 이 프로세스를 안내하는 자세한 솔루션입니다.

이 솔루션은 DOM 조작 및 애니메이션을 단순화하는 강력한 JavaScript 라이브러리인 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;
});

이 jQuery 코드는 원의 반경과 개체 수를 기반으로 각 개체의 위치를 ​​계산합니다. 원의 둘레에 정렬되도록 각 개체의 왼쪽 및 위쪽 위치를 설정합니다.

애니메이션을 완성하려면 다음 CSS 규칙을 추가할 수 있습니다.

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를 결합하면 CSS를 사용하여 원을 중심으로 여러 개체를 쉽게 회전하고 원하는 애니메이션 효과를 얻을 수 있습니다. .

위 내용은 CSS와 jQuery를 사용하여 원 주위로 여러 개체를 회전하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!