使用translateZ时，CSS transform-origin无效

Question

我正在使用translateZ将元素移动到远处。我希望元素保持与其父级的顶部对齐（即从侧面向上和向内收缩），因此我尝试相应地设置transform-origin。

.parent {
    perspective: 10000px;
}
.child {
    transform: translateZ(-200px);
    transform-origin: center top;
}

我为transform-origin设置的任何值都没有效果，并且子元素只是按比例缩小所有边缘，就像transform-origin使用其默认的50% 50%值一样。

我做错了什么？到目前为止，已经在Chrome和Firefox中对此进行了测试。

修改

示例here。

Answer 1

正如@JonP所指出的，transform-origin是达到预期效果的错误属性。相反，我需要在父元素上使用perspective-origin：

.parent {
    perspective: 10000px;
    perspective-origin: top;
}
.child {
    transform: translateZ(-200px);
}

Answer 2

一个工作示例可能会有很大帮助，所以我们可以看到与你相同的东西。但根据MDN的说法，transform-origin中的第3个属性设置了转换的起源https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin