如何在旋转外层div时避免内层div内容跟随旋转

要实现外层div旋转但内层内容保持正常方向，核心思路是给内层元素添加反向旋转，抵消外层的旋转效果。针对你的代码，需要修正CSS选择器并添加反向旋转规则：

修正后的CSS代码 #

.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;

  &:first-child{
    border-left: 0 !important;
    border-top-left-radius: 0 !important;
  }
  &:last-child{
    border-right: 0 !important;
    border-top-right-radius: 0 !important;
  }
}

#test:nth-of-type(2n) {
  transform: rotate(-180deg);
  margin-top: 50px;
}

// 关键：给被旋转的外层div内的内层元素加反向旋转
#test:nth-of-type(2n) #rotate {
  transform: rotate(180deg);
}

对应的HTML代码 #

<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>

说明 #

1. 你原本的#rotate: nth-child(2n)存在语法错误（冒号后多了空格），且选择器范围不对，修正为#test:nth-of-type(2n) #rotate后，能精准选中那些被旋转的外层div里的内层元素。
2. 外层div用rotate(-180deg)旋转，内层元素用rotate(180deg)反向旋转，刚好抵消父元素的旋转效果，让"Hello"保持正常显示方向。
3. 移除了不必要的!important，除非有明确的样式冲突，否则不建议滥用。

内容的提问来源于stack exchange，提问作者Newbie