<div id="pinStarWrapper">
  <input type="checkbox" id="pinStarCenterChkBox">
  <div class="pinStarLeaf"></div>
  <div class="pinStarLeaf"></div>
  <div class="pinStarLeaf"></div>
  <div class="pinStarLeaf"></div>
  <div class="pinStarLeaf"></div>
  <div id="pinStarCenter"></div>
</div>

#pinStarWrapper{
    width: 200px; height: 300px;  position: relative; margin: auto;  
}
.pinStarLeaf{
  
    width: 60px; height: 120px; position: absolute;
    border-radius: 50%/30% 30% 70% 70% ;
    left: 0; right: 0; top: 0; bottom: 0; margin: auto;
    opacity: .5;
    transform-origin: 30px 30px;
    transition: transform 1s linear;
}
.pinStarLeaf:nth-of-type(1){background-color: #B8F0F5;}
.pinStarLeaf:nth-of-type(2){background-color: #9CF3DC;}
.pinStarLeaf:nth-of-type(3){background-color: #94F3B0;}
.pinStarLeaf:nth-of-type(4){background-color: #D2F8A1;}
.pinStarLeaf:nth-of-type(5){background-color: #F3EDA2;}
#pinStarCenter, #pinStarCenterChkBox{
    width: 45px; height: 50px; position: absolute;
    left: 0; right: 0; top: -60px; bottom: 0; margin: auto;
    background-color: #fff;
    border-radius: 50%;
    cursor: pointer;
}
#pinStarCenter,.pinStarLeaf{ pointer-events: none;}
#pinStarCenter > input[type="checkbox"]{
    width: 100%; height: 100%; cursor: pointer;
}
#pinStarCenterChkBox:checked ~ .pinStarLeaf{
    transition: transform 1s linear;
}
#pinStarCenterChkBox:checked ~ .pinStarLeaf:nth-of-type(5){  
  transform: rotatez(35deg);  
}
#pinStarCenterChkBox:checked ~ .pinStarLeaf:nth-of-type(4){  
  transform: rotatez(105deg);  
}
#pinStarCenterChkBox:checked ~ .pinStarLeaf:nth-of-type(3){  
  transform: rotatez(180deg);  
}
#pinStarCenterChkBox:checked ~ .pinStarLeaf:nth-of-type(2){  
  transform: rotatez(255deg);  
}
#pinStarCenterChkBox:checked ~ .pinStarLeaf:nth-of-type(1){  
  transform: rotatez(325deg);  
}