1+X学习日志——扇形2D效果

    section{
    width: 500px;
    height: 300px;
    border-bottom: 10px solid black;
    position: relative;
    margin: 100px auto;
    }
div{
    width: 30px;
    height: 250px;
    text-align: center;
    left: 235px;
    bottom: 15px;
    position:absolute;

    transition: 1s;
    transform-origin: bottom;
}
div:nth-child(7){
    background-color:black;     
}
section:hover div:nth-child(1){
    transform:rotate(90deg);
    background: #66ccff;
}
section:hover div:nth-child(1){
    transform:rotate(75deg);
    background: #4e7386;
}
section:hover div:nth-child(2){
    transform:rotate(60deg);
    background: #20739c;
}
section:hover div:nth-child(3){
    transform:rotate(45deg);
    background: #344b1b;
}
section:hover div:nth-child(4){
    transform:rotate(30deg);
    background: #cc74a0;
}
section:hover div:nth-child(5){
    transform:rotate(15deg);
    background: #b1c760;
}
section:hover div:nth-child(6){
    transform:rotate(-15deg);
    background: #9bacb4;
}
section:hover div:nth-child(8){
    transform:rotate(-30deg);
    background: #63147a;
}
section:hover div:nth-child(9){
    transform:rotate(-45deg);
    background: #a31953;
}
section:hover div:nth-child(10){
    transform:rotate(-60deg);
    background: #10b4e6;
}
section:hover div:nth-child(11){
    transform:rotate(-75deg);
    background: #28b42f;
}
section:hover div:nth-child(12){
    transform:rotate(-90deg);
    background: #962655;
}
section:hover div:nth-child(13){
    transform:rotate(90deg);
    background: #8b7807;
}
section:hover div:nth-child(7){
    background: #66ccff;
}

1+X学习日志——扇形2D效果

原文：https://www.cnblogs.com/qingmengWEB/p/11811392.html