How not to rotate the inner div content if outer div is rotating

After rotating the outer div content of inner div is also rotating. How not to rotate the inner div content if outer div is rotating.

Below is the current output and the code: https://i.stack.imgur.com/iKopZ.png

   .container > div {
      width: 100px;
      height: 50px;
      border-radius: 20px 20px 0 0;
      border: 2px dashed green;
      border-bottom-color: transparent;
    margin-left: -2px;
    float: left;
    }
    
    #test:nth-of-type(2n) {
      transform: rotate(-180deg) !important;
      margin-top: 50px;
    }
    #rotate: nth-child(2n){
      transform:rotate(180deg) !important;
    }
    &:first-child{
      border-left: 0 !important;
      border-top-left-radius: 0 !important;
    }
    &:last-child{
      border-right: 0 !important;
      border-top-right-radius: 0 !important;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js"></script>
<div class="container">
      <div id="test" ng-repeat="n in c.testD">
        <div id="rotate">Hello</div>
      </div>
    </div>