css - 防止 child 继承CSS中的旋转变换

Question

我正在执行 CSS 变换:在父级上旋转，但希望能够抵消这种对某些子级的影响 - 是否可以不使用反向旋转？

反向旋转确实有效，但它会影响元素的位置，并且可能会对性能产生负面影响(？)。无论如何，它看起来都不像一个干净的解决方案。

我尝试了这个问题中的“转换:无”建议 prevent children from inheriting transformation css3 ，但它根本不起作用 - 请在此处查看 fiddle :http://jsfiddle.net/NPC42/XSHmJ/

Answer 1

也许你必须这样写:

.child {
    position: absolute;
    top: 30px;
    left: 50px;
    background-color: green;
    width: 70px;
    height: 50px;
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    transform: rotate(-30deg);
}

查看更多 http://jsfiddle.net/XSHmJ/1/

更新:

您可以为此使用:after & :before 伪类。

检查这个http://jsfiddle.net/XSHmJ/4/