Combining CSS matrixes

Question

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

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 went wrong when I added the matrixes?

vals · Accepted Answer · 2017-04-22 09:00:44Z

1

You can not sum similar transforms. You need to concatenate all of them.

Well, there are special cases, but most of the time this is true

The result would be

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

}

answered Apr 22, 2017 at 9:00

vals

64k11 gold badges96 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user7892745 Over a year ago

Thank you, this worked perfectly. Also, thank you for teaching me something new about css: that you can have multiple of the same transforms in one statement. The more you know....

Collectives™ on Stack Overflow

Combining CSS matrixes

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related