如果外部div正在旋转，如何不旋转内部div内容

Question

旋转后，内部div的外部div内容也在旋转。如果外部div正在旋转，如何不旋转内部div内容。

以下是当前输出和代码：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>

Answer 1

只需旋转内部即可抵消。

.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;
}
#test:nth-of-type(2n) span {
display: block;
background: red;
transform: rotate(-180deg) !important;
}
#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;
}

<div class="container">
<div id="test" ng-repeat="n in c.testD">
<div id="rotate"><span>Hello 1</span></div>
</div>
<div id="test" ng-repeat="n in c.testD">
<div id="rotate"><span>Hello 2</span></div>
</div>
<div id="test" ng-repeat="n in c.testD">
<div id="rotate"><span>Hello 3</span></div>
</div>
</div>