Question

我正在尝试制作一个全宽度旋转的标题，但问题是，当我在标题的右上角旋转它时，它有一个空格。我已经做了一个小问题来更好地理解我的问题。我正在尝试许多方法，但没有任何效果。谢谢

#header {
background: rgba(255,0,0,0.7);
height: 150px;
transform: rotate(356deg) ;
-webkit-transform: rotate(356deg) ;
-moz-transform: rotate(356deg) ;
-o-transform: rotate(356deg) ;
-ms-transform: rotate(356deg) ;
-webkit-transform-origin: bottom left;}

http://jsfiddle.net/SAVw6/

Answer 1

我相信这就是你想要的：

小提琴：http://jsfiddle.net/SAVw6/5/

<强> HTML ：

<div id="container"><div id="header"></div><div>

<强> CSS ：

#header {
    background: rgba(255,0,0,0.7);
    height: 150px;
    transform: rotate(356deg) ;
    -webkit-transform: rotate(356deg) ;
    -moz-transform: rotate(356deg) ;
    -o-transform: rotate(356deg) ;
    -ms-transform: rotate(356deg) ;
    -webkit-transform-origin: bottom left;
    width: 130%;
    margin-left: -20%;
}
#container {
    overflow: hidden;
    width: 100%;
}

容器可防止任何多余的水平滚动
宽度延伸至100%以上，以使其继续向右和向左。
左边距设置为负，以便继续向左而不是向右。
您的-webkit-transform-origin: bottom left; CSS代码专门针对Chrome而非其他浏览器。对于跨浏览器支持，您可以使用：
```
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
```

全宽div旋转不占用最大宽度

1 个答案: