CSS transform

[benoit]

Hi,

I don't understand why the green element is not at the same position, like `.ddd2` (CSS orange).
What's wrong ?

See the Pen vYEQLBx by benoitwimart (@benoitwimart) on CodePen

[ZachSaucier]

Hey benoit,

 

This is because of 1) some differing properties and 2) how GSAP standardizes the order in which transforms are applied. Unlike CSS which can apply them in any order, GSAP uses a standard order which is a good thing! See this post for more info:

 

As for 1), you should use GSAP's transformPerspective property to set transform: perspective(). rotateZ was also not supported (rotation, rotate, and rotationZ all worked) but we will include it in the next release (3.1).

 

Knowing that, you just have to play with the values to set it up in a way that you want. I did a quick pass at setting it up but you can further make it look more similar if need be:

See the Pen vYEbrWd?editors=0010 by GreenSock (@GreenSock) on CodePen

[benoit]

 Adding this in CSS and .ddd3 doesn't display. What's the trick ?

 

  transform-origin:600px 200px;

 

[ZachSaucier]

I recommend learning what transform origin is doing  https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

 

I removed it in my version because I find it easier to translate and such in respect to the default origin.