css3实现元素环绕中心点布局的方法示例

本文介绍了css3实现元素环绕中心点布局的方法示例，分享给大家，具体如下：

效果如图：
&nbs p;

代码实现：

<style>
    *{
        m arg in: 0;
        padding: 0;
        box -s izing: border-box;
    }
    .surround-box,
    . center -point{
        pos IT ion: absolute;
        top:  50%;
        left: 50%;
        width:  20px;
        h ei ght:  20px;
        mar gin -left: -10px;
        margin -t op: -10px;
        border-radius: 50%;
        background-color:  # 000;
    }
    .circle{
        /* 这里一定要绝对定位，这样位置才能铺开来 */
        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控制 方向 ，每个元素旋转30度，12个元素刚好 360 度。translateY控制每个元素距中心点的 距离  */
        transform: rotateZ(30 deg ) 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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

总结

以上是为你收集整理的 css3实现元素环绕中心点布局的方法示例全部内容，希望文章能够帮你解决 css3实现元素环绕中心点布局的方法示例所遇到的问题。

如果觉得网站内容还不错，推荐好友。

查看更多关于css3实现元素环绕中心点布局的方法示例的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did200762

更新时间：2023-04-27 阅读：27次