先上效果圖，如圖所示：
最終效果
第一步：畫個(gè)父容器+12個(gè)子容器（扇葉）
將父容器居中，子容器使用absolute定位，基本代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
body {
display: flex;
height: 95vh;
align-items: center;
justify-content: center;
}
.container {
position: relative;
width: 150px;
height: 150px;
background-color: #008B64;
}
.item {
position: absolute;
top: 0px;
left: 0px;
width: 150px;
height: 80px;
background-color: #A52A2A;
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
效果如圖：
初始頁(yè)面
第二步：將子容器改成等邊三角形
可以通過(guò)border來(lái)實(shí)現(xiàn)三角形的效果，border-left設(shè)置為none，border-top和boder-bottom設(shè)置寬度為40px并透明，border-right寬度設(shè)置為150px，同時(shí)我們需要將本身的width和height設(shè)置為0，background-color去掉。
以下css只顯示修改或者新增的屬性：
.item {
width: 0px;
height: 0px;
border: 40px solid transparent;
border-left-width: 0px;
border-right: 150px solid #A52A2A;
}
效果如圖所示
利用border實(shí)現(xiàn)三角形
第三步：將三角形的頂點(diǎn)對(duì)準(zhǔn)父容器中心
可以通過(guò)left和top進(jìn)行定位，這里使用了calc函數(shù)，當(dāng)然，也可以在紙上計(jì)算出具體值填上來(lái)。
.item {
top: calc(50% - 40px);
left: 50%;
}
效果如下：
將三角形頂點(diǎn)對(duì)準(zhǔn)父容器中心
第四步：將子容器的變換原點(diǎn)設(shè)置到三角形的頂點(diǎn)，并通過(guò)JavaScript將子容器圍繞原點(diǎn)旋轉(zhuǎn)一周
transfrom-origin設(shè)置三角形的變換原點(diǎn)到頂點(diǎn)的，使用jQuery逐個(gè)旋轉(zhuǎn)三角形，每個(gè)相差30度。
<style>
.item {
transform-origin: 0px 50%;
}
</style>
<script type="text/javascript">
$(function(){
$('.item').each(function(index,item){
$(item).css('transform','rotateZ('+ (index * 30) +'deg)');
});
});
</script>
效果如下：
旋轉(zhuǎn)三角形，圍成一圈
到這一步，核心的技巧已經(jīng)介紹完了，下面只是做些界面上的優(yōu)化。
第四步: 子容器單雙采用不同的顏色
.item:nth-child(odd){
border-right-color: cornflowerblue;
}
.item:nth-child(even){
border-right-color: #A52A2A;
}
單雙變色
第五步：使用keyframe讓大轉(zhuǎn)盤旋轉(zhuǎn)
.container {
animation: run-rotate 3s ease-out infinite;
}
@keyframes run-rotate{
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(calc(360deg * 3));
}
}
最終效果如下：
