怎么在css3中实现元素环绕中心点布局

怎么在css3中实现元素环绕中心点布局？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

10年的武城网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都全网营销的优势是能够根据用户设备显示端的尺寸不同，自动调整武城建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联公司从事“武城网站设计”,“武城网站推广”以来，每个客户项目都认真落实执行。

效果如图：

怎么在css3中实现元素环绕中心点布局

代码实现：

<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{
        /* 这里一定要绝对定位，这样位置才能铺开来 */
        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(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>

关于怎么在css3中实现元素环绕中心点布局问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。

当前标题：怎么在css3中实现元素环绕中心点布局
网站网址：https://www.cdcxhl.com/article34/jcccpe.html

成都网站建设公司_创新互联，为您提供网站收录、品牌网站设计、网站排名、外贸网站建设、网站维护、企业建站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容