将图标放置到圆圈中

Z时代
2024-01-10
分类：问答

如何将几个元素放置在另一个元素周围的圆中，并使这些元素也都可单击链接？我希望它看起来像下面的图片，但是我不知道如何实现这种效果。

这有可能吗？

回答：

是的，仅使用CSS很有可能而且非常简单。您只需要

清楚要与图像链接的角度即可

（我在末尾添加了一段代码，用于在

您悬停其中一个角度时显示它们）。

演示

您首先需要一个包装器。我将其直径设置为24em（width: 24em; height: 24em;这样做），您可以将其设置为任何所需的直径。你给它

position: relative;。

然后，将带有图像的链接

水平和垂直放置在该包装的中心。你这样做，通过设置position: absolute;，然后top: 50%; left: 50%;与margin: -2em;（其中2em一半的与图像，我已经设置为链接的宽度4em-再次，你可以

改变它到任何你想要的，但不要忘了改利润率这种情况）。

然后，确定要与图像建立链接的角度，然后添加一个类deg{desired_angle}（例如deg0或之类的deg45东西）。然后，对每个这样的类应用链式CSS转换，如下所示：

.deg{desired_angle} {
   transform: rotate({desired_angle}) translate(12em) rotate(-{desired_angle});
}

{desired_angle}用0，替换的地方45，依此类推…

第一个旋转变换使对象及其轴旋转，平移变换沿旋转的X轴平移对象，第二个旋转换将对象带回到位置演示中，以演示其工作原理。

这种方法的优点是它很灵活。您可以以不同角度添加新图像，而无需更改当前结构。

代码片段

    .circle-container {
        position: relative;
        width: 24em;
        height: 24em;
        padding: 2.8em;
        /*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/
        border: dashed 1px;
        border-radius: 50%;
        margin: 1.75em auto 0;
    }
    .circle-container a {
        display: block;
        position: absolute;
        top: 50%; left: 50%;
        width: 4em; height: 4em;
        margin: -2em;
    }
    .circle-container img { display: block; width: 100%; }
    .deg0 { transform: translate(12em); } /* 12em = half the width of the wrapper */
    .deg45 { transform: rotate(45deg) translate(12em) rotate(-45deg); }
    .deg135 { transform: rotate(135deg) translate(12em) rotate(-135deg); }
    .deg180 { transform: translate(-12em); }
    .deg225 { transform: rotate(225deg) translate(12em) rotate(-225deg); }
    .deg315 { transform: rotate(315deg) translate(12em) rotate(-315deg); }
    <div class='circle-container'>
        <a href='#' class='center'><img src='image.jpg'></a>
        <a href='#' class='deg0'><img src='image.jpg'></a>
        <a href='#' class='deg45'><img src='image.jpg'></a>
        <a href='#' class='deg135'><img src='image.jpg'></a>
        <a href='#' class='deg180'><img src='image.jpg'></a>
        <a href='#' class='deg225'><img src='image.jpg'></a>
        <a href='#' class='deg315'><img src='image.jpg'></a>
    </div>