CSS 使用 translateZ 时 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

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

Answer 2

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

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

CSS transform-origin having no effect when using translateZ