Can I Arrange Clickable Images in a Circle Using CSS?

Position Icons into a Circle

Question: Can several elements be positioned into a circle around another and have those elements be clickable links?

Answer:

Yes, this is possible using CSS. Here are two solutions:

Modern Solution (2024)

1. Start with an array of images with URLs and alt text.
2. Generate HTML using Pug or any other method to create links with the images.
3. Set the container size based on the number of images and image size.
4. Position the images on a circle using CSS transforms.

Legacy Solution (Preserved for Historical Reasons)

1. Create a wrapper with position: relative; and set its diameter.
2. Position the links with the images in the center of the wrapper using position: absolute;.
3. Set the angles for each image and apply chained CSS transforms:

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

Note: The modern solution is flexible and allows for adding new images without altering the current structure.

The above is the detailed content of Can I Arrange Clickable Images in a Circle Using CSS?. For more information, please follow other related articles on the PHP Chinese website!