Jump to content


force3D false still using matrix3d()

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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()


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?

Link to comment
Share on other sites

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()? 

Link to comment
Share on other sites

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! :)

Link to comment
Share on other sites

Alright.. thanks for your patience.. :D


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:




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! :)

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.