Css 在已旋转的元素中旋转元素-在Firefox中不工作

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

已经在Chrome和Safari中测试过，效果很好。但是在FireFox中，内部元素rotate被忽略了（仍然没有在IE中测试）

你知道哪里不对吗

HTML:

---

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

---

确保您正确调用了CSS，也许？

非常适合：（Firefox 29）。在Firefox 29中运行良好。你使用的是哪一版本的Firefox？哎呀，我想我意识到了问题所在-我在

上做了第二次
转换：translate3d（0,0,0）
。向右旋转

这导致旋转被忽略汉克斯·布兰顿，我发现我做了第二次转换，取消了第一次。

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

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