组合 CSS 矩阵答案

【问题标题】：Combining CSS matrixes组合 CSS 矩阵
【发布时间】：2017-09-19 02:12:46
【问题描述】：

我正在尝试将两个 css 3d 变换从一个应用于父级和一个应用于子级到单个统一的应用于子级以提高性能。所以，我的问题是：我在下面的计算中遗漏了什么。

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

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

 我得到了

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

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

【问题讨论】：

【解决方案1】：

您不能对类似的变换求和。您需要连接所有这些。

嗯，有特殊情况，但大多数情况下是这样的

结果是

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

}

【讨论】：