html - 使用 css 旋转的可扩展 div

Question

我正在尝试创建一个页面布局，左侧有一个矩形 div，它旋转了 10 度，随着浏览器的大小而扩展，并且在顶部、左侧和底部不显示其边缘。意思是，页面看起来应该在中间倾斜。

到目前为止，我的代码正确地创建了 div，但是当我展开页面时，您开始看到边缘。

http://jsfiddle.net/jpQvL/1/

HTML

 <div id="wrapper">
    <div id="right"></div>
 </div>

CSS

html, body {
   margin: 0;
   padding: 0;
   height: 100%;
 }

#wrapper {
    position:relative;
    height: 100%;
   }    

#right {
    background: #000;
    transition: all 0.5s ease-in-out 0s;
    width: 50%;
    position: fixed;
    min-height: 110%;
    transform: rotate(10deg);
    top: -73px;
}

Answer 1

问题是该tranform属性需要渲染前缀。您必须添加以下行：

-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);

看看这个

或使用许多像这样的无前缀脚本之一