Question

出于某种原因，我的旋转元素不符合溢出规则？如何保持旋转的部门包含在父部门中？

提前感谢您的帮助。

#box{
    float: left;
    overflow: hidden;
    background-position: center center;
    background-repeat:no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.full-width{
    width: 100%;
    height: 900px;
}

#pull-out{
    width:1800px;
    height: 1800px;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    background: #ffffff;
    position: absolute;
    right: -1273px;
    top: -450px;
}


<div id="box" class="full-width" style="background-image: url(images/5.jpg)">
    <div id="pull-out"></div>
</div>

Answer 1

这与内部div的定位有关。您需要通过设置

使其相对于全角div

position:relative;

在.full-width div。

jsfiddle：http://jsfiddle.net/s8n88gce/1/

旋转元素溢出

1 个答案: