CSS3は、大きな円のドット分布と回転効果を実現するためにtransform-originを使用します。

まず、transform-origin 属性を使用する必要があります。transform 属性は必ず使用してください。これには多くの属性があります。transform の rotate 属性 (2D 回転角度を設定するため) のみを使用し、次に transform-origin を使用してその中心点を設定します。最後に、CSS3 アニメーション属性 animation と一致させます。望む効果を完成させます。
まず、効果画像：

円は動的です。
手順は次のとおりです。
1. 変換属性の使用:
このプロパティを使用して、必要な円上の点の位置を設定するだけです。 transform:rotate(必要な角度)。さらに、1 点注意する必要があります (小さな円を大きな円の端に分散させる必要がある場合、小さな円が大きな円の外側に流れ出ないように、大きな円に相対属性 position: relative を設定し、小さな円に絶対属性 position: absolute を設定する必要があります)。これで最初のステップは完了です。
2. transform-origin属性の使用:
まず、transform-origin 属性の意味を理解する必要があります。 3 つのプロパティを設定できます。これは、順番に 3 つの軸 XYZ であると理解しています。ここでは XY2 軸を使用する必要があります。デフォルトのプロパティは 50% 50% 0 です。それで、これは何を意味するのでしょうか?とても簡単です。transform-origin 属性を設定するノードの左上隅を開始点として設定するだけです。 X 軸に 50%、Y 軸に 50% 移動します。もちろん、必要な中心点がノードの内側にない場合は、PX を使用してノードの外側の中心点を指定できます。2 番目のステップでは、大きな円の境界線上に小さな円が分布している効果を得ることができます。
3. アニメーション属性の使用:
同様に、まずアニメーション属性がアニメーションであることを確認する必要があります。詳細についてはドキュメントを参照してください。これが私たちに必要なものです。

アニメーション:myfirst 10s 線形無限;

myfirst: @keyframes をバインドするための ID
10秒: 時間
リニア：一定の速度
無限：連続

最後に、@keyframesで

 @keyframes myfirst{
    0%{
      変換: 回転(0);
    }
    25%
      変換:回転(90度);
    }
    50%{
      変換:回転(180度);
    }
    75%
      変換:回転(270度);
    }
    100%{
      変換: 回転(360度);
    }
  }

終了した

CSS3 の transform-origin を使用して大きな円にドットを分散し、回転効果を実現する方法については、これで終わりです。CSS3 の transform-origin を使用して大きな円にドットを分散し、回転効果を実現する方法についての関連コンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。