Home > Web Front-end > CSS Tutorial > How to Arrange Clickable Images in a Circular Formation?

How to Arrange Clickable Images in a Circular Formation?

Susan Sarandon
Release: 2024-12-11 05:54:09
Original
485 people have browsed it

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

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template