首页 >web前端 >css教程 >如何将可点击的图像排列成圆形?

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

Susan Sarandon
Susan Sarandon原创
2024-12-11 05:54:09466浏览

How to Arrange Clickable Images in a Circular Formation?

将图标放置在一个圆圈中

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

答案:

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

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn