css - 结合CSS矩阵

我正在尝试将两个css 3d转换结合起来，从一个应用于父级，一个应用于子级到一个统一的统一子级，以提高性能。所以，我的问题是：在以下计算中我缺少了什么？

parent {
    transform-style: preserve-3d;
    transform: translateY(50vh) translateZ(-50vh) rotateX(90deg) rotateY(180deg) rotateZ(180deg);
}

                                     +

child {
    transform: translateZ(-100vh) rotateX(90deg);
}

                                 and I got

combined {
    transform: translateY(50vh) translateZ(-150vh) rotateX(180deg) rotateY(180deg) rotateZ(180deg);
}

添加矩阵时出了什么问题？

最佳答案

您不能总结类似的变换。您需要将所有这些连接起来。

好吧，有一些特殊情况，但是大多数情况下都是这样

结果将是

child {
transform: translateY(50vh) translateZ(-50vh) rotateX(90deg) rotateY(180deg) rotateZ(180deg)
           translateZ(-100vh) rotateX(90deg);

}