问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何让transform-origin固定角度，到一定数量减少角度

头像
大瓜皮
    225124967

    图片描述

    用transform-origin圆点旋转

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

    得到的是根据length数量出来的角度分布，length越少，小圆间隔越大，那如果我想固定隔30度一个小圆，当小圆数量到足够多大圆无法放下的时候，小圆的间隔才变小，应该如何解决

    javascripthtmlcss
    阅读 2.1k
    1 个回答
    得票最新
    头像
    陌路凡歌
      7.9k21119
      ✓ 已被采纳

      你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>
      查看全部 1 个回答
      推荐问题