Question

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

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

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

take a look at this

或使用许多无前缀的脚本之一，如this one

用css旋转的可扩展div

1 个答案: