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 중국어 웹사이트의 기타 관련 기사를 참조하세요!