如何將可點擊的圖像排列成圓形？-css教學-PHP中文網

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

Susan Sarandon

發布： 2024-12-11 05:54:09

原創

486 人瀏覽過

How to Arrange Clickable Images in a Circular Formation?

將圖示放置在一個圓圈中

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

答案：

2024 解決方案：

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

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

原始解決方案：

創建一個具有定義直徑的包裝紙並將其相對於中心定位。
在包裝器中定位每個影像：
- 設定位置使其在水平和垂直方向上絕對並居中。
- 使用負邊距調整影像大小。
定義具有所需旋轉角度的類別並應用變換鏈:
- 旋轉變換物件及其軸。
- 平移移動物件物件沿著旋轉的 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中文網其他相關文章！