RotateX and rotate center in perspective

[iroller]

Hi,

 

Could someone help me to make the fan rotating in perspective? I can make rotation, I can make perspective, but I can't make it rotate in perspective. I thought preserve-3d would help, but looks like I'm missing something.

 

This one is closer: 

See the Pen qddLjL by iroller (@iroller) on CodePen

but still not what I need

See the Pen OVVrpy by iroller (@iroller) on CodePen

[Carl]

Try

 

CSSPlugin.defaultTransformPerspective=200;

TweenMax.to("#fan", 4, {rotationY: 360, transformOrigin:"center", repeat:-1});

 

​

[Diaco]

Carl's right , but just in addition ,seems you looking for this : 

See the Pen xGGmpQ by MAW (@MAW) on CodePen

[iroller]

Wonderful. Thanks Carl and Diaco.AW

[iroller]

Diaco.AW: any chance to spin fan in perspective using only group, not the whole svg?

See the Pen jPPRbM by iroller (@iroller) on CodePen

- it's rotating, but can't make it using the perspective

[Carl]

Glad you got what you are looking for.

 

The official SVG spec doesn't actually support 3D transforms at all, so I wouldn't recommend applying them. Some browsers have partial support, but I really wouldn't count on it. This isn't a GSAP limitation - it's simply a browser/spec issue. 

[iroller]

Glad you got what you are looking for.

 

The official SVG spec doesn't actually support 3D transforms at all, so I wouldn't recommend applying them. Some browsers have partial support, but I really wouldn't count on it. This isn't a GSAP limitation - it's simply a browser/spec issue. 

 

Yeah thanks. It's more about experimenting right now.