クリック可能な画像を中心画像の周囲に円状に配置するにはどうすればよいですか?

アイコンを円の中に配置する

質問:

複数の画像を 1 つの円内に配置するにはどうすればよいですか?別の画像を円で囲み、すべてをクリックできるようにしますリンク?

答え:

解決策 1 (最新)

HTML、CSS、JavaScript の使用:

1. に基づいて画像リンクを含む HTML を生成します。配列。
2. CSS を使用して、コンテナ内の円上に画像を配置します。
3. 円の半径と画像のサイズに基づいてコンテナのサイズを調整します。

解決策2 (旧)

CSS の使用変換:

1. サークルコンテナのラッパー div を作成します。
2. 画像をラッパーの中央に絶対に配置します。
3. 回転と変換にチェーンされた CSS 変換を適用します。画像を希望の角度にします。

コードスニペット:

.circle-container {
  width: 24em;
  height: 24em;
  position: relative;
}

.circle-container a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.deg0 img {
  transform: rotate(0deg);
}

.deg45 img {
  transform: rotate(45deg);
}

.deg90 img {
  transform: rotate(90deg);
}

以上がクリック可能な画像を中心画像の周囲に円状に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。