长话短说，废话少说

  • 看成果

  • 上代码
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title><style>#div1{  position: relative;  height: 200px;  width: 200px;  border: 1px solid black;  border-radius:50%;  transition: transform 1s}#div2{  width:50px;  height:30px;  position: absolute;  //top:15px;  left:calc(50% - 25px);  border: 1px solid black;  background-color: red;  transform: rotate(0deg);  transform-origin:25px 100px;}  #div3{  width:50px;  height:30px;  position: absolute;  //top:15px;  left:calc(50% - 25px);  //border: 1px solid black;  //background-color: red;  transform: rotate(45deg);  transform-origin:25px 100px;}#div3 .content {    width:100%;    height:100%;    border: 1px solid black;    background-color: gray;    transform: rotate(-45deg);                        transition: transform 1s  }  #div4{  width:50px;  height:30px;  position: absolute;  //top:15px;  left:calc(50% - 25px);  transform: rotate(90deg);  transform-origin:25px 100px;}#div4 .content {    width:100%;    height:100%;    border: 1px solid black;    background-color: pink;    transform: rotate(-90deg);    transition: transform 1s  }  #div5{  width:50px;  height:30px;  position: absolute;  //top:15px;  left:calc(50% - 25px);  border: 1px solid black;  background-color: red;  transform: rotate(135deg);  transform-origin:25px 100px;}  #div6{  width:50px;  height:30px;  position: absolute;  //top:15px;  left:calc(50% - 25px);  border: 1px solid black;  background-color: red;  transform: rotate(180deg);  transform-origin:25px 100px;}#div7{  width:50px;  height:30px;  position: absolute;  //top:15px;  left:calc(50% - 25px);  border: 1px solid black;  background-color: red;  transform: rotate(225deg);  transform-origin:25px 100px;}</style></head><body><div id="div1">  <div id="div2"></div>  <div id="div3">    <div class='content' id='test'></div>  </div>  <div id="div4">    <div class='content' id='test1'></div>  </div>  <div id="div4"></div>  <div id="div5"></div>  <div id="div6"></div>  <div id="div7"></div></div>  <hr/><button id='rotateButton'>旋转</button><script>  let count = 0  const btn = document.getElementById('rotateButton')  const circle = document.getElementById('div1')  const test = document.getElementById('test')  const test1 = document.getElementById('test1')  btn.addEventListener('click',function(){    count = count + 45    let testCount = -count-45    let testCount1 = -count-90    circle.style.transform = 'rotate('+count+'deg)'    test.style.transform = 'rotate('+testCount+'deg)'    test1.style.transform = 'rotate('+testCount1+'deg)'  })</script></body></html>
  • 以上是个小demo，置信聪慧的你把它跑起来之后稍加调试就能体会其中奥秘了

  • 讲思路
  • 摆地位。把动态的地位排列放好
  • 公转。须要旋转的时候整体去旋转，此时各个item地位天然会产生偏移
  • 自传。如上图，不作解决的话item的朝向永远是向着容器圆心的，所以须要item自转
  • 在须要旋转时公转和自转同时进行
  • 加个transition过渡
  • 齐活

客官留步,难道你不喜爱老夫的封面吗？还不珍藏加关注？关注过百放一波福利哟