求助：不会改变小五角形的旋转角度了（是不能再次旋转吗？）

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>2-3</title>
<style type="text/css">
  /* 此处写代码*/
  .flag{
   width: 600px;
   height: 400px;
   background: red;
   position: absolute;
   margin: 0 auto;
  }
  .star{
   margin: 100px 100px;
   width:0;
   height: 0;
   display: block;
   position: relative;
   border-left: 100px solid transparent;
   border-right: 100px solid transparent;
   border-bottom: 70px solid yellow;
   -webkit-transform: rotate(35deg);
      -moz-transform: rotate(35deg);
       -ms-transform: rotate(35deg);
     -o-transform: rotate(35deg);
     transform: rotate(35deg);
  }
  .star:before{
   width: 0;
   height: 0;
   display: block;
   position: relative;
   top:-47px;
   left: -65px;
   border-left: 30px solid transparent;
   border-right: 30px solid transparent;
   border-bottom: 80px solid yellow;
   content: '';
   -webkit-transform: rotate(-35deg);
      -moz-transform: rotate(-35deg);
       -ms-transform: rotate(-35deg);
     -o-transform: rotate(-35deg);
     transform: rotate(-35deg);
  }
  .star:after{
   width: 0;
   height: 0;
   display: block;
   position: relative;
   top:-75px;
   left: -108px;
   border-left: 100px solid transparent;
   border-right: 100px solid transparent;
   border-bottom: 70px solid yellow;
   content: '';
   -webkit-transform: rotate(-70deg);
      -moz-transform: rotate(-70deg);
       -ms-transform: rotate(-70deg);
     -o-transform: rotate(-70deg);
     transform: rotate(-70deg);

}

.star1{

   margin: 60px -15px;
   -webkit-transform: scale(.5, -.5);
      -moz-transform: scale(.5, -.5);
    -ms-transform: scale(.5, -.5);
     -o-transform: scale(.5, -.5);
     transform: scale(.5, -.5);
  }
  .star2{
   margin: -180px 80px;
   -webkit-transform: scale(.2, -.2);
      -moz-transform: scale(.2, -.2);
    -ms-transform: scale(.2, -.2);
     -o-transform: scale(.2, -.2);
     transform: scale(.2, -.2);
/*再次旋转小五角形结果放大了*/
   /*-webkit-transform: rotate(-5deg);
      -moz-transform: rotate(-5deg);
       -ms-transform: rotate(-5deg);
     -o-transform: rotate(-5deg);
     transform: rotate(-5deg);*/
  }
  .star3{
   margin: 145px 110px;
   -webkit-transform: scale(.2, -.2);
      -moz-transform: scale(.2, -.2);
    -ms-transform: scale(.2, -.2);
     -o-transform: scale(.2, -.2);
     transform: scale(.2, -.2);
  }
  .star4{
   margin: -170px 110px;
   -webkit-transform: scale(.2, -.2);
      -moz-transform: scale(.2, -.2);
    -ms-transform: scale(.2, -.2);
     -o-transform: scale(.2, -.2);
     transform: scale(.2, -.2);
  }
  .star5{
   margin: 135px 80px;
   -webkit-transform: scale(.2, -.2);
      -moz-transform: scale(.2, -.2);
    -ms-transform: scale(.2, -.2);
     -o-transform: scale(.2, -.2);
     transform: scale(.2, -.2);
  }

</style>
</head>
<body>
    
    <div class="flag">
    <div class="star star1"></div>
    <div class="star star2"></div>
    <div class="star star3"></div>
    <div class="star star4"></div>
    <div class="star star5"></div>
    </div>
</body>
</html>