force3D false still using matrix3d()

[Jonathan]

Hello Everyone,

 

I put together a codepen example showing 3 boxes rotating in the Y axis. 

1. Green box uses rotationY
2. Red box uses transform: rotateY()
3. Blue box uses transform: rotate3d()

Example:

See the Pen Kgmtn by jonathan (@jonathan) on CodePen

 

If you look at the red box, and inspect that elements code, you will see how the red box is using matrix3d() instead of the simple transform rotateY()

• Is there something im missing to why matrix3d() is being used?
• Is there a way to force GSAP to use the simple transform rotateY() transform function instead of matrix / matrix3d?

Thanks again for any help?

[GreenSock]

Yep, that's very much by design. We did a fair amount of testing and found that when you're doing any kind of rotation or skewing, matrix3d() performs better. If you're only doing translation and/or scaling, we use the simpler notation because it's very slightly faster (although there are minor differences among browsers). 

 

In summary, GSAP is working hard to give you the best performance possible. matrix3d() is the best option in most cases. 

 

Do you mind me asking why you'd want it to use rotateY() instead of the matrix3d()? 

[Jonathan]

Thanks Jack! .. I figured that GSAP was choosing the best performance possible.

 

I usually opt for better performance, but I was only seeing this issue in latest Google Chrome, not Firefox (IE is not an issue since it doesn't support preserve-3d, so i have to do a workaround for that)

 

Im doing multiple 3D cube animations, but for some reason when i rotate in 3d (using matrix and matrix3d)  ... Google Chrome doesn't render the 3d rotation correctly for some of the faces in the cube.

 

I know GSAP animates the transforms in the right order.. like first rotate, then translate..

 

I will setup a better codepen example to show you the behavior that im seeing in Chrome, so you can see exactly whats happening.  It will take a bit to setup the multiple 3d cube with those rotations, so please standby.. Thanks!

[Jonathan]

Alright.. thanks for your patience..

 

In the process of creating my reduced example in codepen.. and 4 hours testing later, I found out that this is a bug in Chrome Webkit:

 

CSS 3D defect: -webkit-perspective property:

 

http://code.google.com/p/chromium/issues/detail?id=93682

 

Having to do with webkit perspective().. so i opted to use use -webkit-transform: perspective() instead of -webkit-perspective. Basically i had to use transformPerspective.. the perspective function within the transform function. So my faces were not given the right perspective, but now they are.

 

Hope this helps anyone else having issues in Chrome with -webkit-transform in some situations with perspective!