css - 在已旋转的元素中旋转元素 - 在 Firefox 中不起作用

Question

我将元素向左旋转 1 度。然后将其中的元素旋转-1度，使内部元素是直的。

已在 Chrome 和 Safari 中测试过，效果很好。但在 FireFox 中，内部元素旋转被忽略(在 IE 中仍未测试)。

知道哪里出了问题吗？

HTML:

<div class="rotated-left">
    <div class="rotated-right">
        <p>This text should be straight.</p>
    </div>
</div>

CSS:

.rotated-left {
    -webkit-transform: rotate(1deg);
    -moz-transform: rotate(1deg);
    -o-transform: rotate(1deg);
    -ms-transform: rotate(1deg);
    transform: rotate(1deg);   
}

.rotated-right {
    -webkit-transform: rotate(-1deg);
    -moz-transform: rotate(-1deg);
    -o-transform: rotate(-1deg);
    -ms-transform: rotate(-1deg);
    transform: rotate(-1deg);  
}

Answer 1

我在 chrome、firefox 和 IE 中测试过，没有任何问题。我什至删除了特定于浏览器的元素。仍然有效。

请确保您正确调用了 CSS，对吧？