Example of how to use CSS3 to layout elements around a center point

Example of how to use CSS3 to layout elements around a center point

This article introduces an example of how CSS3 can be used to layout elements around a center point. The details are as follows:

The effect is as shown below:

Code implementation:

<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .surround-box,
    .center-point{
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 20px;
        margin-left: -10px;
        margin-top: -10px;
        border-radius: 50%;
        background-color: #000;
    }
    .circle{
        /* This must be absolutely positioned so that the position can be spread out*/
        position: absolute;
        top: -10px;
        left: -10px;
        width: 40px;
        height: 40px;
        line-height: 40px;
        border-radius: 50%;
        text-align: center;
        color: #fff;
    }
    .circle1{
        background-color: red;
        /* rotateZ controls the direction, each element rotates 30 degrees, and 12 elements are exactly 360 degrees. translateY controls the distance of each element from the center point*/
        transform: rotateZ(30deg) translateY(80px);
    }
    .circle2{
        background-color: orange;
        transform: rotateZ(60deg) translateY(80px);
    }
    .circle3{
        background-color: yellow;
        transform: rotateZ(90deg) translateY(80px);
    }
    .circle4{
        background-color: green;
        transform: rotateZ(120deg) translateY(80px);
    }
    .circle5{
        background-color: seagreen;
        transform: rotateZ(150deg) translateY(80px);
    }
    .circle6{
        background-color: blue;
        transform: rotateZ(180deg) translateY(80px);
    }
    .circle7{
        background-color: purple;
        transform: rotateZ(210deg) translateY(80px);
    }
    .circle8{
        background-color: lightsalmon;
        transform: rotateZ(240deg) translateY(80px);
    }
    .circle9{
        background-color: deeppink;
        transform: rotateZ(270deg) translateY(80px);
    }
    .circle10{
        background-color: lightyellow;
        transform: rotateZ(300deg) translateY(80px);
    }
    .circle11{
        background-color: lightgreen;
        transform: rotateZ(330deg) translateY(80px);
    }
    .circle12{
        background-color: lightslategrey;
        transform: rotateZ(360deg) translateY(80px);
    }
</style>
<body>
    <div class="center-point"></div>
    <div class="surround-box">
        <div class="circle circle1">1</div>
        <div class="circle circle2">2</div>
        <div class="circle circle3">3</div>
        <div class="circle circle4">4</div>
        <div class="circle circle5">5</div>
        <div class="circle circle6">6</div>
        <div class="circle circle7">7</div>
        <div class="circle circle8">8</div>
        <div class="circle circle9">9</div>
        <div class="circle circle10">10</div>
        <div class="circle circle11">11</div>
        <div class="circle circle12">12</div>
    </div>
</body>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<:  What is WML?

>>:  Solve the problem of failure to mount files or directories using ./ relative path in docker run

Recommend

Use of Linux usermod command

1. Command Introduction The usermod (user modify)...

What are the ways to import CSS? What is the difference between link and @import? How to choose

I saw that Taobao’s webpage uses import, while man...

Solve the problem of not being able to enter breakpoints when using GDB in Docker

question Running gdb in docker, hitting a breakpo...

Windows platform configuration 5.7 version + MySQL database service

Includes the process of initializing the root use...

Docker container exits after running (how to keep running)

Phenomenon Start the Docker container docker run ...

Let’s talk about the symbol data type in ES6 in detail

Table of contents Symbol Data Type The reason why...

Vue implements interface sliding effect

This article example shares the specific code of ...

How to fix the four sides of the table to scroll up, down, left and right

question: When I was doing project statistics rec...

Vue dynamic menu, dynamic route loading and refresh pitfalls

Table of contents need: Ideas: lesson: Share the ...

Detailed explanation of javascript knowledge points

Table of contents 1. Basic Introduction to JavaSc...

MYSQL uses Union to merge the data of two tables and display them

Using the UNION Operator union : Used to connect ...

JS addEventListener() and attachEvent() methods implement registration events

In JavaScript's DOM event model, events are r...

Simple example of HTML text formatting (detailed explanation)

1. Text formatting: This example demonstrates how...

CentOS8 - bash: garbled characters and solutions

This situation usually occurs because the Chinese...

Notes on the MySQL database backup process

Today I looked at some things related to data bac...