Stuck with trying to recreate animation from CSS to Gsap

[NikChes]

Hello,

 

I have created this animated logo using CSS which triggers on hover :

 

See the Pen pRbqMQ by nikches (@nikches) on CodePen

 

I started recreating the above animation using Greensock and i'm stuck on the "rotationY" property.

My problem is with the right wing of the eagle. As you can see in the CSS animation the right wing moves 60 deg towards the viewer on the Y axis, but when i recreate the same wing animation with GSAP the wing is moving away from the viewer.

 

I have tried using negative values (rotationY: -60) but the result is the same.

I have also tried using "directionalRotation" by apllying "rotationY: "-60_cw" / "rotationY: "60_cw" /  "rotationY: "-60_ccw" / "rotationY: "60_ccw" without success.

 

I would like to ask for your help in identifying what am i doing wrong ?

 

Thank you for your time and help.

See the Pen wgWNwy by nikches (@nikches) on CodePen

[dneckles]

Try changing the line 8 from rotationY:60 to rotationZ:60. I did that and it no longer animates toward the user

 

I havent done 3d stuff in a minute, but I can see why you used rotation. That's confusing a little bit.

[NikChes]

Try changing the line 8 from rotationY:60 to rotationZ:60. I did that and it no longer animates toward the user

 

I havent done 3d stuff in a minute, but I can see why you used rotation. That's confusing a little bit.

Hello alwayzambitious, thank you for your response. When the wing rotates on the Z-axis (rotateZ) it looks like a rotating clock. What i am trying to achieve is rotate on the Y-axis (rotateY) so it will look like an opening door. Check out my original animation to see what i mean: 

See the Pen pRbqMQ by nikches (@nikches) on CodePen

 

[Oliver16Years]

As I know SVG doesn't support 3D CSS transforms.

 

 

http://read.pudn.com/downloads135/ebook/573344/OReilly-SVG-Essential.pdf

 

If You want to rotate vector shapes in 3D space, put every one of them into <div><svg>....</svg></div> tags and twist the <div>s.

 

But I am getting confused now what is possible and what is not.