クリック可能な画像を円形に配置するにはどうすればよいですか?

アイコンを円形に配置する

質問:
クリック可能性を維持しながら複数の画像を円形に配置するにはどうすればよいですか?機能は?

答え:

2024 ソリューション:

このソリューションは、より現代的なアプローチを提供します:

1. 画像の配列を利用する
2. テンプレート言語 (Pug など) を使用して、配列に基づいて HTML を生成します。
3. CSS で、画像の数とエッジ サイズに基づいて計算された半径を持つコンテナを定義します。
4. 変換を使用して円上に画像を配置し、間隔をあけます

元の解決策:

1. 定義された直径を持つラッパーを作成し、中心を基準にして配置します。

2. ラッパー内に各画像を配置します:

   • 負のマージンを使用して画像サイズを調整します。

3. 必要な回転角度を持つクラスを定義し、変換を適用します。チェーン:

   • rotate はオブジェクトとそのオブジェクトを変換します。軸。
   • translate は、回転した X 軸に沿ってオブジェクトを移動します。
   • rotate は、オブジェクトを再び回転させて元の位置に戻します。

HTML および CSS コードスニペット:

<div class="circle-container">
    <a href="#" class="center"></a>
    <a href="#" class="deg0"></a>
    <a href="#" class="deg45"></a>
    <a href="#" class="deg135"></a>
    <a href="#" class="deg180"></a>
    <a href="#" class="deg225"></a>
    <a href="#" class="deg315"></a>
</div>

.circle-container {
    width: 24em;
    height: 24em;
    position: relative;
}
.circle-container a {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4em;
    height: 4em;
    margin: -2em;
}
.deg0 { transform: translate(12em); }
.deg45 { transform: rotate(45deg) translate(12em) rotate(-45deg); }

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