Shulou(Shulou.com)06/01 Report--

This article mainly introduces css3 how to achieve the layout of elements around the central point, the article is very detailed, has a certain reference value, interested friends must read it!

Code implementation:

* {

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 {

/ * it must be absolutely positioned here 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)

}

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

The above is all the content of the article "how css3 implements the layout of elements around the central point". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.