鍍金池/ 問答/HTML/ 如何讓transform-origin固定角度，到一定數(shù)量減少角度

如何讓transform-origin固定角度，到一定數(shù)量減少角度

圖片描述

用transform-origin圓點旋轉(zhuǎn)

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

得到的是根據(jù)length數(shù)量出來的角度分布，length越少，小圓間隔越大，那如果我想固定隔30度一個小圓，當(dāng)小圓數(shù)量到足夠多大圓無法放下的時候，小圓的間隔才變小，應(yīng)該如何解決

回答
編輯回答
耍太極

你30度一個也就是放12個，就做個判斷看liSize是否大于12，是的話就用360/liSize*i，否則就30*i

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .zh-circle{
                width: 300px;
                height: 300px;
                border: 1px solid red;
                border-radius: 50%;
                list-style: none;
                position: relative;
                margin: 300px;
            }
            
            .zh-circle li{
                width: 30px;
                height: 30px;
                border: 1px solid red;
                border-radius: 50%;
                position: absolute;
                top: 50%;
                left: 50%;            
                margin: -15px 0 0 -15px;
                transform-origin:50% 50%; 
            }
        </style>
    </head>
    <body>
        <ul class="zh-circle">
            
        </ul>
        <script src="jquery-2.1.0.js"></script>
        <script>
            var liSize = 14,
                li = '';
                if(liSize>12){
                    for(var i=0; i<liSize; i++) {
                        li += '<li style="transform: rotate('+360/liSize*i+'deg) translate(150px)"></li>';
                    }
                }else{
                    for(var i=0; i<liSize; i++) {
                     li += '<li style="transform: rotate('+30*i+'deg) translate(150px)"></li>';
                    }
                }
           
            $('.zh-circle').html(li);
        </script>
    </body>
</html>
2017年5月16日 16:18