鍍金池/ 問答/HTML5  HTML/ css如何讓元素平均分布在圓上

css如何讓元素平均分布在圓上

clipboard.png
如何已知圓中心有一個relative的點，現(xiàn)在for循環(huán)一些absolute的浮動子元素在里面，如何讓
這些子元素完美分布在圓上，等差是沒用的，用弧度公式也沒成功，求大神解答

回答
編輯回答
別硬撐

說下思路，就不寫代碼了：
1，先定位一個小圓在12點鐘的位置，然后，循環(huán)克隆元素，每克隆一個用translate:ratate()進行旋轉，可以先試一下

2017年5月10日 19:22
編輯回答
囍槑
<style>
    .zh-circle{position: relative;width: 240px;height: 240px;border-radius: 50%;border: 1px solid #f00;box-sizing: border-box;margin: 100px auto 0;}
    .zh-circle li{position: absolute;z-index: 2;left: 50%;top: 0;width: 40px;height: 40px;margin: -20px 0 0 -20px;border: 1px solid #f00;border-radius: 50%;box-sizing: border-box;list-style: none;transform-origin: 20px 140px;}
</style>
<ul class="zh-circle">
    <!-- <li></li> -->
</ul>
<script>
    var liSize = 10,
        li = '';
    for(var i=0; i<liSize; i++) {
        li += '<li style="transform: rotate('+360/liSize*i+'deg)"></li>';
    }
    $('.zh-circle').html(li);
</script>

圖片描述

描述一下：
1、transform-origin: x y z; 設置旋轉中心點，示例中為什么是20px 140px呢，正常情況下是0 120px的，但前端做了margin向上向左偏移20px，所以這里需要加回來。

2、360/liSize*i 設置疊加旋轉角度

2017年9月18日 02:40