css3倒三角形-1.使用css3实现大转盘

先上效果图，如图：

最终疗效

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

将父容器居中，并使用绝对位置放置子容器。 基本代码如下：

    
        
        
        
        <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;
            }
        
    
    
        

            

            

            

            

            

            

            

            

            

            

            

            

        
    

效果如图：

初始页

步骤2：将子容器更改为等腰三角形

通过边框可以实现三角形的效果。 border-left设置为none，border-top和border-bottom长度设置为40px并且透明，border-right间距设置为150px，需要我们自己设置宽度和高度为0，background-color已删除。

以下 css 仅显示更改或添加的属性：

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

效果如图

利用边框实现三角形

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

可以通过左侧和顶部进行定位。 这里使用了 calc 函数。 当然，你也可以在纸上估算一下具体数值并填写。

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

效果如下：

将三角形顶点与父容器的中心对齐

步骤4：将子容器的变换原点设置为三角形的顶点，并通过JavaScript围绕原点旋转子容器

transfrom-origin 将三角形的变换原点设置为顶点，并使用 jQuery 将三角形逐个旋转，每个三角形相差 30 度。

.item {
    transform-origin: 0px 50%;
}


    $(function(){
        $('.item').each(function(index,item){
            $(item).css('transform','rotateZ('+ (index * 30) +'deg)');
        });
    });

效果如下：

将三角形旋转一圈

至此css3倒三角形css3倒三角形，核心方法已经介绍完毕。 以下只是一些界面优化。

步骤 4：为单子容器和双子容器使用不同的颜色

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

单变色和双变色

步骤5：使用关键帧旋转大转盘

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

最终疗效如下：

点击查看疗效