核心提示：思路：封装函数使每个p进行旋转点击最后一个p将所有p重置到初始位置使用延迟定时器调用函数（实现页面加载完成之后的展开动画）点击除了最后一个p以外的展开动画（根据点击的p的所引致，让所有p进行旋转，设置...
思路：
封装函数使每个p进行旋转
点击最后一个p将所有p重置到初始位置
使用延迟定时器调用函数（实现页面加载完成之后的展开动画）
点击除了最后一个p以外的展开动画（根据点击的p的所引致，让所有p进行旋转，设置点击元素之前和之后的p的旋转偏移值）
大致效果，点击最上面的p，实现扇子的折叠和展开效果，点击其他任意一个p，就让当前这个p在垂直位置显示
看一个效果图：
代码如下：
<!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 p{
width:300px; height:60px; position:absolute; transform-origin:30px 5px;
border-radius:9px;
left:400px;
top:300px;
transition:1s;
}
#box p:nth-of-type(1){background:#ED7F6A;}
#box p:nth-of-type(2){background:#666666;}
#box p:nth-of-type(3){background:#993300;}
#box p:nth-of-type(4){background:#e15671;}
#box p:nth-of-type(5){background:#0e566c;}
#box p:nth-of-type(6){background:#B8E6AF;}
#box p:nth-of-type(7){background:#B8C3CC;}
#box p:nth-of-type(8){background:#f2dfa9;}
#box p:nth-of-type(9){background:#EB7159;}
#box p:nth-of-type(10){background:#EB7667;}
</style>
</head>
<body>
<p id="box">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</p>
<script>
var oBox = document.querySelector("#box");
var aDiv = oBox.querySelectorAll("p");
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>
