Question

我有一些CSS3的问题，正如标题所描述的那样。在我的网站中，我使用了几个article的

article { 
   transform: rotate(1deg) 
}

（加上三个浏览器供应商前缀，为简洁而省略）

要将内容保持笔直向上（只是背景旋转）我使用

将文章中的所有元素都旋转回去

article > * { 
    transform: rotate(-1deg)'; 
}

在文章（他们是博客文章）中，通常有几个p，有时候里面有浮动图像。但是，当我像这样漂浮图像时：

<article>
  <p>
    <a href="#">
      <img src="x.jpg" style="float: right" />
    </a>
  </p>
  <p>Content here</p>
</article>

第二个<p>将结束到图像的左侧（因为它会浮动）但是因为它是一个块级元素，它将占用article和的整个宽度重叠浮动图像，使链接在某些地方无法点击。当我禁用transform: rotate时，这不会发生，所以我认为它与渲染旋转的方式有关。问题出现在Chrome和FireFox中，IE不支持旋转，Opera我没有测试过。

任何人都知道如何修复？

（例如：http://www.stephanmuller.nl/portfolio/stephanmuller-nl/）

Answer 1

所以，我继续调查以追踪这个错误，我发现当你使用CSS transform属性（不限制旋转）时，它会被重新渲染。通常在浮动元素之后的元素知道不与它重叠但是在它下面流动（内容浮动但是段落的背景例如仍然跨越包含元素的整个宽度，在浮动元素后面）。

当旋转元素时，浏览器不会考虑浮动元素。旋转的元素将与浮动元素重叠。对于在DOM中旋转元素之前的相对/绝对定位元素也是如此;他们也重叠了。

一些测试用例：jsFiddle

CSS3 rotate渲染元素以使它们重叠浮动

1 个答案: