Tag:vue.jsjavascriptcsshtml5
Article From:https://segmentfault.com/q/1010000012150471
Question:


How to know that the center of a circle has a relative point, and now for loops some absolute floating elements in it.
These sub elements are perfectly distributed on the circle, and the arithmetical difference is useless.

Answer 0:
<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>

Describe:
1、transform-origin: x y z; Set the rotation center point, why is 20px 140px in the example, normally 0 120px, but the front end does margin upwards to the left 20px, so here needs to be added back.

2、360/liSize*i Set up the superposition rotation angle

Answer 1:

When you say the idea, you don’t write the code.
1,First locate a small circle in the 12 o’clock position, then loop clone elements, each clone is rotated with translate:ratate (), you can try it first.

Similar Posts:

Leave a Reply

Your email address will not be published. Required fields are marked *