我正在执行一个CSS变换:在父节点上旋转,但希望能够否定对某些孩子的这种影响 – 是否可以不使用反向旋转?
反向旋转确实有效,但它会影响元素的位置,并且可能会对性能产生负面影响(?).无论如何,它看起来不像一个干净的解决方案.
我尝试了这个问题prevent children from inheriting transformation css3中的“transform:none”建议,但它根本不起作用 – 请看这里的小提琴:http://jsfiddle.net/NPC42/XSHmJ/
解决方法
我相信你需要使用第二个孩子伪造它,规范似乎不允许你想要的行为,我可以理解为什么子元素的位置必须受到变换的影响家长.
这不是最优雅的解决方案,但我认为你正在尝试做一些规范永远不会允许的事情.看看我的解决方案的以下小提琴:
.parent { position: relative; width: 200px; height: 150px; margin: 70px; } .child1 { background-color: yellow; width: 200px; height: 150px; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -o-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); } .child2 { position: absolute; top: 30px; left: 50px; background-color: green; width: 70px; height: 50px; }
<div class="parent"> <div class="child1"></div> <div class="child2"></div> </div>