如何实现一个转动的太极图

在实现太极图之前我们要先了解一下关于2D旋转和过渡的知识

什么是过渡

过渡指的是从一种样式逐渐改变为另一种样式的效果。
必须规定两项内容：
1.指定要添加效果的css样式。
2.指定效果的持续时间。
transition：width 2s；
transition：css属性过渡时间过渡速度延迟时间；用于对一个属性中设置一个过渡效果。
注意：添加多个过渡效果可以使用逗号隔开。
transition-property：width；规定应用过渡的css属性名称
值：需要过渡的属性名称。
all：所有
none：定义无
transition-duration：5s；定义过渡效果需要花费的时间，默认值为0
transition-timing-function：ease；规定过渡的时间曲线，指定切换效果的速度。
ease：默认值，逐渐减速。
ease-in：加速。
ease-out：减速
ease-in-out：先加速后减速
linear：匀速
transition-delay：2s；规定过渡效果的延迟时间，默认值为0

2D旋转相关知识点

transform：rotate（10deg）；
rotate（number：旋转的角度）单位：deg
值：正值，顺时针旋转
负值，逆时针旋转
注意：旋转的圆点默认为中心点。
transform：rotateX（30deg）；以X轴为中心进行旋转（上下旋转）。
transform：rotateY（30deg）；以Y轴为中心进行旋转（左右旋转）。
transform-origin：；设置变换旋转原点
默认值：50% 50%，效果等同于center center。
transform-origin：center center；/transform-origin：50% 50%；
值：两个值，分别代表X轴和Y轴。
一个值，代表X轴，另一个轴默认为center。
取值：1.可以使用长度单位px，百分比等。
2.可以使用（top，left，right，bottom，center）
如果值只有一个使用方向，浏览器会自动判断该值是作用于X轴还是Y轴，另一个默认为center

实现一个太极图

基本框架

<div class="taiji"><div class="hei"></div><div class="bai"><div class="baimi"></div></div><div class="bla"><div class="blami"></div></div></div>

基本样式

main {

    width: 700px;height: 700px;background: black;margin: 50px auto;padding: 1px;
}section {margin-top: 200px;width: 600px;height: 600px;margin: 50px auto;position: relative;border-radius: 50%;border: 8px dashed plum;transform: rotate(0deg);transition: all 5s linear;
}
section:hover {transform: rotate(360deg);
}
.taiji{width: 130px;height: 130px;background: #fff;border-radius: 50%;position: absolute;left: 39%;top: 32%;transform: rotate(0deg);transition: all 3s linear;box-shadow: 0 0 10px #cccccc;
}
.taiji:hover{transform: rotate(360deg);
}
.hei{width: 130px;height: 65px;background: black;border-radius: 65px 65px 0 0;
}
.bai{width: 65px;height: 65px;background: #fff;border-radius: 50%;margin-top: -35px;display: flex;justify-content: center;align-items: center;
}
.bla{width: 65px;height: 65px;background: black;border-radius: 50%;margin-left: 65px;margin-top: -65px;display: flex;justify-content: center;align-items: center;}
.baimi{width: 20px;height: 20px;border-radius: 50%;background: black;}
.blami{width: 20px;height: 20px;border-radius: 50%;background: #ffff;}

效果图