spin.css

.wheel{
       position:relative;
       height: 500px;
       width: 500px;
}
.spin{
       position:relative;
       height: 100%;
        width: 100%; 
        border-radius: 50%;
        border: 10px solid rgb(3, 49, 7);
        overflow: hidden;
        transition: all ease 5s;
}
body{
       display: flex;
       align-items: center;
       justify-content: center;
       background-color: rgb(0, 153, 255);
}
span{
       height: 50%;
       width:  50%;
       display: inline-block;
       position: absolute;
      
}
.spopt{
       clip-path: polygon( 0% 92%, 100% 50%, 0% 8%);
       background-color: orangered;
       top: 120px;
       left: 0;
}
.spopt1{
       clip-path: polygon(100% 92%, 0 50%, 100% 8%);
       background-color: yellow;
       top: 120px;
       right: 0;

 }
 .spopt2{
       clip-path: polygon(50% 0%, 8% 100%, 92% 100%);
       background-color:  red;
       left: 120px;
       bottom: 0;
 }
 .spopt3{
       clip-path: polygon(50% 100%, 92% 0%, 8% 0%);                          
       background-color:  blue;
       left: 120px;
       top: 0px;
 }
 .opt2{
        height: 100%;
        width: 100%;
        transform: rotate(-136deg);
 }
.spopt4{
      clip-path: polygon( 0% 92%, 100% 50%, 0% 8%);
      background-color: green;
      top: 120px;
      left: 0;
}
.spopt5{
      clip-path: polygon(100% 92%, 0 50%, 100% 8%);
      background-color: orange ;
      top: 120px;
      right: 0;
}
.spopt6{
      clip-path: polygon(50% 0%, 8% 100%, 92% 100%);
      background-color:  purple;
      left: 120px;
      bottom: 0;
}
.spopt7{
      clip-path: polygon(50% 100%, 92% 0%, 8% 0%);  
      background-color:  rgb(231, 149, 163);
      left: 120px;
      top: 0px;
     
}
 span strong{
        height: 65px;
        width: 65px;
        line-height: 65px;
        border-radius: 50%;
        font-size: 24px;
        text-align: center;
        background-color: rgb(112, 245, 35);
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);


 }
 .rotate{
        position: absolute;
        top:41%;
        left:49%;
        transform: translate(-50%,-50%);
        width: 80px;
        height: 80px;
        border-radius: 50%;
        border: 4px solid rgb(115, 255, 0);
        background-color: rgb(0, 180, 165);
        color: black;
        font-weight: bold;
        cursor: pointer;

 }
 .rotate:active{
        height: 95px;
        width:95px;
        font-size: 25px;
 }
 #head{ 
        color: White;
 }