How to Arrange Clickable Images in a Circular Formation?

Position Icons into a Circle

Question:
How can I align multiple images in a circle while maintaining their clickable functionality?

Answer:

2024 Solution:

This solution offers a more modern approach:

1. Utilize an array of image objects.
2. Generate HTML based on the array using a templating language (e.g., Pug).
3. In CSS, define a container with a radius calculated based on the number of images and edge size.
4. Position images on the circle using transforms, spacing them equally.

Original Solution:

1. Create a wrapper with defined diameter and position it relative to the center.

2. Position each image within the wrapper:

   • Set the position to absolute and center it both horizontally and vertically.
   • Use negative margin to adjust for image size.

3. Define classes with desired rotation angles and apply transform chains:

   • rotate transforms the object and its axes.
   • translate moves the object along the rotated X axis.
   • rotate again rotates the object back to its original position.

HTML and CSS Code Snippet:

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

The above is the detailed content of How to Arrange Clickable Images in a Circular Formation?. For more information, please follow other related articles on the PHP Chinese website!