如何將可點擊的圖像排列成圓形？

將圖示放置在一個圓圈中

問題：
如何將多個影像對齊成一個圓圈，同時保持其可點擊性功能？

答案：

2024 解決方案：

此解決方案提供了更現代的方法：

1. 利用影像數組物件。
2. 使用模板語言（例如 Pug）基於數組生成 HTML。
3. 在 CSS 中，定義一個容器，其半徑根據圖片數量和邊緣大小計算。
4. 使用變換將影像放置在圓上，並間隔它們

原始解決方案：

1. 創建一個具有定義直徑的包裝紙並將其相對於中心定位。

2. 在包裝器中定位每個影像：

   • 設定位置使其在水平和垂直方向上絕對並居中。
   • 使用負邊距調整影像大小。

3. 定義具有所需旋轉角度的類別並應用變換鏈:

   • 旋轉變換物件及其軸。
   • 平移移動物件物件沿著旋轉的 X 軸。
   • 再次旋轉會將物件旋轉回原始位置。

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中文網其他相關文章！