CSS と jQuery を使用して、円の中で複数のオブジェクトを効率的に回転するにはどうすればよいですか?

CSS を使用して円で複数のオブジェクトを回転する: 総合ガイド

この記事では、複数のオブジェクトを円で回転する際の課題について説明します。 CSSを使用した円形パターン。実装の詳細を掘り下げ、任意の数の外部項目を処理できる堅牢な Jquery ソリューションを紹介します。

回転メカニズムを理解する

CSS は、transform プロパティを提供します。これにより、回転を含むさまざまな変換を要素に適用できるようになります。 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 中国語 Web サイトの他の関連記事を参照してください。