How to realize the layout of elements around the center point by css3
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!
