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

这篇文章主要介绍css3怎样实现元素环绕中心点布局，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

成都创新互联从2013年成立，是专业互联网技术服务公司，拥有项目成都网站制作、成都网站建设网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元介休做网站,已为上家服务,为介休各地企业和个人服务,联系电话:18982081108

代码实现：

<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>

<divclass="center-point"></div>

<divclass="surround-box">

<divclass="circlecircle1">1</div>

<divclass="circlecircle2">2</div>

<divclass="circlecircle3">3</div>

<divclass="circlecircle4">4</div>

<divclass="circlecircle5">5</div>

<divclass="circlecircle6">6</div>

<divclass="circlecircle7">7</div>

<divclass="circlecircle8">8</div>

<divclass="circlecircle9">9</div>

<divclass="circlecircle10">10</div>

<divclass="circlecircle11">11</div>

<divclass="circlecircle12">12</div>

</div>

</body>

以上是“css3怎样实现元素环绕中心点布局”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

分享题目：css3怎样实现元素环绕中心点布局
URL链接：https://www.cdcxhl.com/article20/gdjijo.html

成都网站建设公司_创新互联，为您提供搜索引擎优化、微信小程序、建站公司、商城网站、网站维护、做网站

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

猜你还喜欢下面的内容