位置图标到圈子 [英] Position icons into circle

问题描述

如何将几个< img> 元素放在另一个圆圈中，并且这些元素也都是可点击的链接？我想要它看起来像下面的图片，但我不知道如何实现这种效果。

How can I position several <img> elements into a circle around another and have those elements all be clickable links as well? I want it to look like the picture below, but I have no idea how to achieve that effect.

这是否有可能？

推荐答案

是的，这是非常可能和非常简单的使用CSS。你只需要清楚记住你想要的图像链接的角度（我已经添加了一段代码，只是为了显示角度，当你悬停其中一个）。

Yes, it is very much possible and very simple using just CSS. You just need to have clear in mind the angles at which you want the links with the images (I've added a piece of code at the end just for showing the angles whenever you hover one of them).

你首先需要一个包装器。我设置它的直径为 24em （ width：24em; height：24em; 就是这样），你可以设置它到任何你想要的。你给它 position：relative; 。

You first need a wrapper. I set its diameter to be 24em (width: 24em; height: 24em; does that), you can set it to whatever you want. You give it position: relative;.

然后你的链接放置在包装中心的图像，水平和垂直。你可以通过设置 position：absolute; 然后 top：50％; left：50％; 和 margin：-2em; （其中 2em 与图像的链接的宽度，我已设置为 4em - 再次，您可以更改为任何您想要的，但不要忘记更改边距在这种情况下）。

You then position your links with the images in the center of that wrapper, both horizontally and vertically. You do that by setting position: absolute; and then top: 50%; left: 50%; and margin: -2em; (where 2em is half the width of the link with the image, which I've set to be 4em - again, you can change it to whatever you wish, but don't forget to change the margin in that case).

然后，您决定要与图像链接的角度，并添加一个类 deg { desired_angle} （例如 deg0 或 deg45 或其他）。然后对于每个这样的类你应用链接的CSS变换，像这样：

You then decide on the angles at which you want to have your links with the images and you add a class deg{desired_angle} (for example deg0 or deg45 or whatever). Then for each such class you apply chained CSS transforms, like this:

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

您将替换 {desired_angle} 与 0 ， 45 ，等等...

where you replace {desired_angle} with 0, 45, and so on...

第一个旋转变换旋转对象及其轴，平移变换沿旋转的X轴平移对象，第二个旋转变换将对象返回到位置 - 演示以演示如何工作 。

The first rotate transform rotates the object and its axes, the translate transform translates the object along the rotated X axis and the second rotate transform brings back the object into position - demo to illustrate how this works.

此方法的优点是灵活。

The advantage of this method is that it is flexible. You can add new images at different angles without altering the current structure.

HTML ：

<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>

相关 CSS ：

.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); }

---

此外，您还可以使用背景图片的链接，而不是使用 img 标签。

EDIT ： IE8及更旧版本的备用示例 IE8和IE7）

EDIT: example with fallback for IE8 and older (tested in IE8 and IE7)

这篇关于位置图标到圈子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！