结合CSS矩阵

2023年8月31日 232次阅读

我正在尝试将两个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);

}

点赞