[css3]css3はtransform-originを使用して、大きな円上のドット分布のレイアウトと回転を実現します。

まず、transform-originプロパティを使うには、多くの属性を持つtransformプロパティを使わなければならない。最後に、css3 animationプロパティのanimationを使って、欲しい効果を完成させる必要があります。
まず、結果です。

円はすべて動的なものです。
手順は以下の通りです。
1. transform 属性が使用される。
このプロパティを使用して、円周上の必要な位置を設定するだけです。また、ある点( 小さな円を大きな円の端に分散させたい場合は、小さな円が大きな円の外に出ないように、大きな円には相対プロパティのposition: relativeを、小さな円には絶対プロパティのposition: absoluteを設定する必要があります ). というわけで、最初のステップは終了です。
2. transform-origin プロパティが使用される。
まず、transform-originプロパティの意味を理解する必要があります。3つの属性を設定することができますが、これはXYZ順に3軸と理解しています。ここではXY2軸を使用する必要があります。デフォルトのプロパティは50% 50% 0です。では、これはどういう意味でしょうか？簡単なことで、transform-originプロパティを持つノードの左上隅を始点に設定する、ということです。X軸に50%、Y軸に50%移動します。もちろん、欲しい中心点がノードの内部にない場合は、PX を使ってノードの外部の中心点を指定することができる
2番目のステップでは、大きな円の境界線上に分割された小さな円の効果を得ることができます。
3. アニメーションのプロパティを使用します。
繰り返しになりますが、まずアニメーションのためのアニメーション・プロパティを知る必要がありますので、ご自身でドキュメントをご覧ください。必要なのは、この文章だけです。

animation:myfirst 10s linear infinite;

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

最後に@keyframesで

 @keyframes myfirst{
    0%{
      transform: rotate(0);
    }
    25%{
      transform:rotate(90deg);
    }
    50%{
      transform:rotate(180deg);
    }
    75%{
      transform:rotate(270deg);
    }
    100%{
      transform: rotate(360deg);
    }
  }

完了

今回はcss3でtransform-originを使って大きな円上のドット分布のレイアウトと回転を実現する記事を紹介しましたが、より関連するcss3で大きな円上のドット分布のレイアウトと回転を実現する内容はHouse of Scriptsの過去記事で検索するか以下の関連記事を引き続きご覧ください、今後ともHouse of Scriptsをよろしくお願いします！(｀・ω・´)