Html 旋转元素溢出

出于某种原因，我的旋转元素不符合溢出规则？如何将我的旋转分区包含在父分区中

提前谢谢你的帮助

#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>

#框{
浮动：左；
溢出：隐藏；
背景位置：中心；
背景重复：无重复；
背景位置：中心；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
.全宽{
宽度：100%；
高度：900px；
}
#拔出{
宽度：1800px；
高度：1800px；
-ms变换：旋转（45度）；
-webkit变换：旋转（45度）；
变换：旋转（45度）；
背景：#ffffff；
位置：绝对位置；
右：-1273px；
顶部：-450px；
}

这与内部div的定位有关。您需要通过设置使其相对于全宽div

position:relative;

在.全宽div上

jsfiddle：