html - 变形后的 child 包含奇怪的 parent 宽度

Question

我有一个简单的 HTML 标记:

<div class="parent">
    <div class="child">
    </div>
</div>

transform: translate(-100%); 将子元素移出视口(viewport)，但父元素宽度不随子元素移动:

这是我简化的 CSS:

.parent {
    position: fixed;
    top: 20%;
    left: 0;
}

.parent .child {
    height: 300px;
    width: 500px;
    background: orange;
    transform: translate(-100%);
    -webkit-transform: translate(-100%);
    -moz-transform: translate(-100%);
    -o-transform: translate(-100%);
}

看看:

Answer 1

当转换和元素时，它的父元素不受影响。这就是 CSS 转换应该如何工作的。来自 Using CSS transforms :

By modifying the coordinate space, CSS transforms change the shape and position of the affected content without disrupting the normal document flow.