CSS Matrix Join

Question

I am trying to combine two css 3d transforms from one applied to a parent and one applied to a child, to one unified applied to a child to increase productivity. So my question is this: what am I missing in the calculation below.

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);
}

What happened when I added matrices?

Answer 1

You cannot summarize similar conversions. You need to combine them all.

Well, there are special cases, but in most cases it’s true.

Result will be

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

}