コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > クリック可能な画像を中心画像の周囲に円状に配置するにはどうすればよいですか?

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

DDD
リリース： 2024-12-10 17:59:15
オリジナル
812 人が閲覧しました

How to Arrange Clickable Images in a Circle Around a Center Image?

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

質問:

複数の画像を 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 サイトの他の関連記事を参照してください。

ソース：php.cn
前の記事：CSS グリッド コンテナ内の画像の端だけを歪ませるにはどうすればよいですか? 次の記事：疑似要素と境界線を使用して完璧な HTML/CSS 三角形を作成するにはどうすればよいですか?
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2238
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2379
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1988
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1876
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1947
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート