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

在实现太极图之前我们要先了解一下关于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;
    
}

效果图