长话短说,废话少说
<!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过渡
- 齐活
客官留步,难道你不喜欢老夫的封面吗?还不收藏加关注?关注过百放一波福利哟