位置图标到圈子 [英] 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.

是灵活的。

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