我将元素向左旋转 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);
}
最佳答案
我在 chrome、firefox 和 IE 中测试过,没有任何问题。我什至删除了特定于浏览器的元素。仍然有效。
请确保您正确调用了 CSS,对吧?
关于css - 在已旋转的元素中旋转元素 - 在 Firefox 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24185387/