1.使用css3实现大转盘-原创手记-慕课网

先上效果图，如图所示：

webp

最终效果

第一步：画个父容器+12个子容器（扇叶）

将父容器居中，子容器使用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>

效果如图：

webp

初始页面

第二步：将子容器改成等边三角形

可以通过border来实现三角形的效果，border-left设置为none，border-top和boder-bottom设置宽度为40px并透明，border-right宽度设置为150px，同时我们需要将本身的width和height设置为0，background-color去掉。

以下css只显示修改或者新增的属性：

.item {  
    width: 0px;    height: 0px;    border: 40px solid transparent;    border-left-width: 0px;    border-right: 150px solid #A52A2A;
}

效果如图所示

webp

利用border实现三角形

第三步：将三角形的顶点对准父容器中心

可以通过left和top进行定位，这里使用了calc函数，当然，也可以在纸上计算出具体值填上来。

.item {    top: calc(50% - 40px);    left: 50%;
}

效果如下：

webp

将三角形顶点对准父容器中心

第四步：将子容器的变换原点设置到三角形的顶点，并通过JavaScript将子容器围绕原点旋转一周

transfrom-origin设置三角形的变换原点到顶点的，使用jQuery逐个旋转三角形，每个相差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>

效果如下：

webp

旋转三角形，围成一圈

到这一步，核心的技巧已经介绍完了，下面只是做些界面上的优化。

第四步: 子容器单双采用不同的颜色

.item:nth-child(odd){    border-right-color: cornflowerblue;
}.item:nth-child(even){    border-right-color: #A52A2A;
}

webp

单双变色

第五步：使用keyframe让大转盘旋转

.container {    animation: run-rotate 3s ease-out infinite;
}
@keyframes run-rotate{    from {        transform: rotateZ(0deg);
    }    to {        transform: rotateZ(calc(360deg * 3));
    }
}

最终效果如下：

点击查看效果

作者：农场主的鸡
链接：https://www.jianshu.com/p/d6dc2313ad23