思路：
封装函数使每个div进行旋转
点击最后一个div将所有div重置到初始位置
使用延迟定时器调用函数（实现页面加载完成之后的展开动画）
点击除了最后一个div以外的展开动画（根据点击的div的所引致，让所有div进行旋转，设置点击元素之前和之后的div的旋转偏移值）
大致效果，点击最上面的div，实现扇子的折叠和展开效果，点击其他任意一个div，就让当前这个div在垂直位置显示
看一个效果图：
代码如下：（如果想要看完整的效果，粘贴复制，浏览器浏览即可查看哦）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>折扇</title>
<style>
#box{
width:1000px; height:800px; margin:0 auto; position:relative;
transform-style:preserve-3d; perspective:600px;
}
#box div{
width:300px; height:60px; position:absolute; transform-origin:30px 5px;
border-radius:9px;
left:400px;
top:300px;
transition:1s;
}
#box div:nth-of-type(1){background:#ED7F6A;}
#box div:nth-of-type(2){background:#666666;}
#box div:nth-of-type(3){background:#993300;}
#box div:nth-of-type(4){background:#e15671;}
#box div:nth-of-type(5){background:#0e566c;}
#box div:nth-of-type(6){background:#B8E6AF;}
#box div:nth-of-type(7){background:#B8C3CC;}
#box div:nth-of-type(8){background:#f2dfa9;}
#box div:nth-of-type(9){background:#EB7159;}
#box div:nth-of-type(10){background:#EB7667;}
</style>
</head>
<body>
<div id="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<script>
var oBox = document.querySelector("#box");
var aDiv = oBox.querySelectorAll("div");
var len = aDiv.length;
var onOff = true;
setTimeout(spread,300);
aDiv[len-1].onclick = function(){//点击最后一个元素的时候实现扇子的展开和折叠效果
if(onOff){
fold();
}else{
spread();
}
onOff = !onOff;
}
for(var i=0; i<len-1; i++){
aDiv[i].index = i;
aDiv[i].onclick = function(){
for(var i=0; i<len; i++){
var deg = 270 - (340-16*(this.index));//计算我们当前点击的元素要旋转多少度到达270度的位置
if(i<this.index){
aDiv[i].style.transform = `rotate(${340-16*i+deg+10}deg)`;
}else if(i>this.index){
aDiv[i].style.transform = `rotate(${340-16*i+deg - 10}deg)`;
}else{
aDiv[i].style.transform = `rotate(${340-16*i+deg}deg)`;
}
}
}
}
function spread(){//扇子展开效果
for(var i=0;i<len; i++){
aDiv[i].style.transform = `rotate(${340-16*i}deg)`;
}
}
function fold(){//扇子折叠效果
for(var i=0; i<len; i++){
aDiv[i].style.transform = "rotate(0deg)"
}
}
</script>
</body>
</html>