如何将可点击的图像排列成圆形？

将图标放置在一个圆圈中

问题：
如何将多个图像对齐成一个圆圈，同时保持其可点击性功能？

答案：

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中文网其他相关文章！