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