【问题标题】：Html + Css: How to create a auto-resizing rotated background?Html + Css：如何创建自动调整大小的旋转背景？
【发布时间】：2011-03-05 14:23:00
【问题描述】：

图像一个完整的黑色网页。在这个网页上是一个 100% 大小的白色 div，它填满了整个页面。我想将此 div 旋转 -7 度（或逆时针 7 度）。这将导致黑色背景在边缘的三角形中可见，就像您将一张纸放在桌子上并稍微向左转动一样。

实际上，这可以通过一些 css 来完成，并且效果很好（IE 除外）。

现在真正的问题是：我想在其上放置一个普通的、非旋转的 div 元素来显示内容，这样只有背景会旋转。

虽然反向旋转包含的 div 不起作用，因为通过这两种转换，文本在所有浏览器中都会变得模糊。

我怎么能意识到这一点？最好的解决方案是在当前的 Webkit 浏览器、FF3.5+ 和 IE7+ 中工作。如果只有 IE8+，我也能忍受。

【问题讨论】：

我不是 html 爱好者，但你不能将两个 div 都放在“顶级”上并使用绝对定位，以便它们重叠吗？

标签： html coding-style css rotation

【解决方案1】：

尝试使用

#content {

 position: absolute;
 z-index: 500;
 margin-left: auto;
 margin-right: auto;
}

#background {
//Your white DIV
}


<div id="background"></div>

<div id="content">
 Lorem ipsum
</div>

【讨论】：

【解决方案2】：

在背景上使用position:absolute;，在后面使用z-index。 Here is an example.

【讨论】：

相当不错，但我至少需要 IE8 支持，这在那儿不起作用。
IE 的过滤器只能旋转 90,180 度，我相信是 270 度。您可能可以使用图像来创建黑色三角形并将每个三角形定位到页面的一角。
使用矩阵变换它可以在任何度数下工作，问题是矩阵变换会将 div 移到一边。图片不是选项，因为它们需要根据浏览器窗口的大小来改变它们的大小。

【解决方案3】：

你必须把它旋转回来...http://jsfiddle.net/gFCHE/ 在 Chrome 或 ChromeOS 上一点也不模糊。它也不应该在其他任何地方。

将overflow:hidden 添加到#crooked 以获得酷炫的图像效果。此 CSS 可以帮助您入门，但您需要对其进行调整以使其正常工作。

<div id='wrap'>
    <div id='cooked'>
        <div id='straight'>
        </div>
    </div>
</div>


  #wrap{
    background:#000;
    height:100%;
}
#crooked{
    height:100%;
    color:#f00;
     -moz-transform: rotate(-7.0deg);  /* FF3.5+ */
       -o-transform: rotate(-7.0deg);  /* Opera 10.5 */
  -webkit-transform: rotate(-7.0deg);  /* Saf3.1+, Chrome */
      -ms-transform: rotate(-7.0deg);  /* IE9 */
          transform: rotate(-7.0deg);  
          filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
                 M11=0.992546151641322, M12=0.12186934340514748, M21=-0.12186934340514748, M22=0.992546151641322, sizingMethod='auto expand');
           zoom: 1;
}

包装{

    background:#000;
    height:100%;
}
#crooked{
    height:100%;
    background:#fff;
     -moz-transform: rotate(-7.0deg);  /* FF3.5+ */
       -o-transform: rotate(-7.0deg);  /* Opera 10.5 */
  -webkit-transform: rotate(-7.0deg);  /* Saf3.1+, Chrome */
      -ms-transform: rotate(-7.0deg);  /* IE9 */
          transform: rotate(-7.0deg);  
          filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
                 M11=0.992546151641322, M12=0.12186934340514748, M21=-0.12186934340514748, M22=0.992546151641322, sizingMethod='auto expand');
           zoom: 1;
}
#straight{
     -moz-transform: rotate(7.0deg);  /* FF3.5+ */
       -o-transform: rotate(7.0deg);  /* Opera 10.5 */
  -webkit-transform: rotate(7.0deg);  /* Saf3.1+, Chrome */
      -ms-transform: rotate(7.0deg);  /* IE9 */
          transform: rotate(7.0deg);  
         filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
                 M11=0.992546151641322, M12=-0.12186934340514748, M21=0.12186934340514748, M22=0.992546151641322, sizingMethod='auto expand');
           zoom: 1;

【讨论】：

不错的方法，但是 div 在 IE 中移动了。它不与浏览器窗口重叠，因为它在其他浏览器中是正确的。我该如何解决？
嗯，我明白你在说什么。我在 IE 中修复了它，但在 webkit 中破坏了它。希望这会有所帮助。我现在和我的女儿们在家，但如果你不知道的话，我会在晚上回来。 jsfiddle.net/J8EzP