Question

我已经制作了以下JSfiddle以查看我的实际问题。我希望旋转的div为全宽。

我已经通过给它120%宽度并在容器中设置overflow:hidden来实现这一点（我希望旋转的div不要在角落中留空空格。）

现在我想把一些东西放在中间。我尝试使用保证金：0自动，但因为它120%它到了正确的中心。我想要完全在屏幕中间（当然在不同的屏幕上）

以下是代码和the jsfiddle：

<div class="container">
    <div class="rotaded">
        <p>
            <img src="http://imgcdn.nrelate.com/image_cache/www.valcun.com/fc95c92475a927c2bc5130b343e2c5f8_thumb_short-url.png">
        </p>
    </div>
</div>

CSS：

.container {
    overflow:hidden;
    width:100%;
}
.rotaded {
    background:red;
    width:120%;
    height:200px;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
}
p {
    width:100px;
    height:200px;
    position:relative;
    top:40px;
    margin: 0 auto;
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
}

Answer 1

如果使用备用旋转，倾斜：

，您的数学（以及其他所有内容）将更容易

.container {
    overflow:hidden;
    width:100%;
}
.rotaded {
    background:red;
    width:100%;
    height:200px;
    -webkit-transform: skewY(-3deg);
    -moz-transform: skewY(-3deg);
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
}
p {
    width:100px;
    height:200px;
    position:relative;
    top:40px;
    margin: 0 auto;
    -webkit-transform: skewY(3deg);
    -moz-transform: skewY(3deg);
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
}

Main 的优点是skewY不会改变变换元素的宽度（垂直边继续垂直），这似乎是你想要的

fiddle

Answer 2

好吧，如果你的宽度为120％...那么好像20％会在屏幕右侧显示..

所以不是这样，让我们有10％向右走，10％向左走，所以它是偶数。

所以试试

.rotaded {
    margin-left: -10%;
}

或

.rotaded {
    left: -10%;
    position: relative; //likely need to add this
}

Answer 3

您可以通过添加以下行来执行此操作：

/*margin: 0 0 0 30%;*/   

.container {
overflow:hidden;
width:100%;

}
.rotaded {
    background:red;
    width:120%;
    height:200px;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
}
p {
    width:100px;
    height:200px;
    position:relative;
    top:40px;
    margin: 0 0 0 30%;
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
}

Answer 4

如果你右边有一个透明的anysize边框，它会一直显示你的背景，即使它是背景图像： http://jsfiddle.net/qf2tg/5/

.container {
            overflow:hidden;
            width:100%;
        }
        .rotaded {
            background: url(http://lorempixel.com/800/800/nature);/* let use an image instead color  
    to see what it does ;) */
            width:100%;
            border-right:100px solid rgba(0, 0, 0, 0);/* here grow your container 
    to have it overflow 
    , beware of the use of box-sizing :) 
    and give enough width to your border, 
    higher is the container, bigger is the gap to fill  */
            height:200px;
            -webkit-transform: rotate(-3deg);
            -moz-transform: rotate(-3deg);
            -webkit-transform-origin: bottom left;
            -moz-transform-origin: bottom left;
        }
        p {
            text-align:center;
            height:200px;
            position:relative;
            top:20px;
            margin: 0 auto;
            -webkit-transform: rotate(3deg);
            -moz-transform: rotate(3deg);
            -webkit-transform-origin: bottom left;
            -moz-transform-origin: top left;
        }

以图像为中心，不要向width提供<p>，但text-align:center;应该可以。

高度或旋转度越高，填充的间隙越大，需要根据需要增加边框的宽度。

在旋转的div中将div对齐

4 个答案: