Can you help me to explain the reason why rotationX or rotationY 3D transforms are not applied to children elements of SVG (rect, circ)? This issue manifests itself only in Safari (Mac Safari version 8.0.5 (10600.5.17)) and Mobile Safari (iOS 8.3) AND only in GSAP TweenMax.js version 1.16.1 (linked from CDN or locally).
View this Codepen example in Safari: – notice the linked cdn js file (//cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js)
Here is an identical code where rotationY/X 3D transforms ARE applied: – the only difference from above is that here linked TweenMax.min.js is version 1.14.2
Is this in fact an issue with TweenMax.js 1.16.1 or is my setup wrong?
3D transform issue in GSAP/1.16.1, when rotationY/X applied to inner SVG elements
in GSAP
Posted
See the Pen ZGGKqz by Dima-L (@Dima-L) on CodePen