Kombinieren von CSS-Matrizen

Question

Ich versuche, zwei css 3D-Transformationen von einem auf ein Elternteil angewendet und eines auf ein Kind angewendet zu einem einzigen vereinheitlichten auf das Kind angewendet wird, um die Leistung zu erhöhen. Meine Frage ist also: Was fehlt mir in der folgenden Berechnung?

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

Was schief gelaufen ist, wenn ich die Matrizes hinzugefügt?

Answer 1

Sie können ähnliche Transformationen nicht summieren. Sie müssen alle von ihnen verketten.

Nun gibt es spezielle Fälle, aber die meiste Zeit ist dies wahr

Das Ergebnis wäre

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

}