html - 在 css3 中，如何使用外部元素的边框剪辑内部转换的 `position:absolute` 元素？

Question

下面是片段:

.out {
    margin: 100px auto;
    width: 50%;
    height: 100px;
    background-color: green;
    
}

.in {
    width: 50%;
    height: 50px;
    background-color: red;
    transform: translate3d(-20%, -40%, 0px) scale(0.7);
    position: absolute;

}

<div class="out">
    <div class="in">
    </div>
    
</div>

可以看出，内部元素(红色方 block )超出了外部元素(绿色方 block )的边界。

有没有人知道如何剪掉超出外部元素边界的内部元素部分？

--

我发现 overflow: hidden 不能很好地工作，因为内部元素中的 position: absolute 属性..

Answer 1

在外部元素上添加overflow:hidden:

.out {
    overflow:hidden;
    margin: 100px auto;
    width: 50%;
    height: 100px;
    background-color: green;
    
}

.in {
    width: 50%;
    height: 50px;
    background-color: red;
    transform: translate3d(-20%, -40%, 0px) scale(0.7);

}

<div class="out">
    <div class="in">
    </div>
    
</div>