GSAP doesn´t work with 3 values on trasnformOrigin

[caemostajo]

In the first lines of JS i´m doing:
 

TweenMax.set(".big-flipper",  {

       transformOrigin:"75px 0px -37.5px",

});

Gsap is not applying the z value, when i inspect the element with google Dev tools the z value always becomes "0" no matter what value i use:
        transformOrigin:"75px 0px 0px",


.... cheers

See the Pen QNYXPr?editors=0110 by caemostajo (@caemostajo) on CodePen

[Dipscom]

Hi caemostajo,

 

Yes, I can confirm that if you inspect the element, you will see "0px" in the "element.style" but that is not causing GSAP's transformOrigin not to work. If I change the values in the code, I can clearly see the ".big-flipper" rotating from a different pivot point.

 

I think it's just your calculations that are getting a bit confused as you are trying to use a mix of percentage and pixel based values. By default, your pen starts with a white background and the ".big-flipper" is not rotating around the correct point in relation to the cube. If I change the size of the window, eventually, the background turns gray and the ".big-flipper" starts to rotate around the correct pivot point. 

[GreenSock]

Yes, GSAP actually manages the z part of the transformOrigin internally in order to work around a bug in Safari. It's very intentional. But like Dipscom said, it doesn't actually change the way things look - GSAP adjusts the matrix() or matrix3d() values to accommodate the z part of the transformOrigin. If we didn't do it this way, some versions of Safari simply wouldn't animate/render correctly. Again, that was a browser bug that's unrelated to GSAP - we just figured out a way to protect you from it