Jump to content
Search Community

rotate 3D element overlapping another element?

ohem test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi, I wasn't quite sure how to phrase this, but what I'm trying to do is have a ring, rotated slightly in 3D space so that part of the ring is in front of something, and part pf the ring is behind it.  

 

I put together a really rough example to demonstrate what I'm trying to do, but it's not quite working: 

See the Pen avOeqO by ohem (@ohem) on CodePen

 

In this example, the cat should be inside the circle.  I've played with z-index but it only brings the ring or the cat to the front, never putting the cat inside the ring.

 

Does anybody have any tips or suggestions about how to make the elements actually overlap in 3D space?

 

This image also shows a more subtle example of the kind of overlapping I'd like to achieve; ideally I'd only be rotating the ring 1 degree so it wouldn't be noticeable, but for the purposes of my codepen demo I made it a little more obvious to illustrate the effect:

 

ai8-0018.gif

 

Any help is much appreciated! 

See the Pen xOGRjJ by anon (@anon) on CodePen

Link to comment
Share on other sites

  • 4 weeks later...

That was a great example!

 

Not sure if I should make a new thread for this, but I just realized that the 3D rotation in my first example doesn't work at all in Safari or Firefox; it just looks like a normal 2D circle.  Is there something missing from this code?  I haven't really worked with 3D and GSAP yet so I might be missing something super obvious.  It does work fine in Chrome, though.

var tl = new TimelineLite();

tl
.set("#intro", {perspective:600})
.set("#ring", {rotationY:80, transformOrigin:"center center"})
;

Thanks!

Link to comment
Share on other sites

I believe this to be a Firefox and Safari bug. But its not really a bug since the spec states that SVG 1.1 allow the transform but the SVG element will remain on a 2D plane.

 

If you look at the transform in Chrome. it is using matrix3d(). But In Firefox and Safari they honor the spec and only allow 2D transform on SVG elements.

 

As a rule of thumb for true cross browser is to not try 3D transforms on SVG elements, if you want cross browser behavior ;)

 

http://www.w3.org/TR/SVG-Transforms/

 

The SVG 1.1 transform spec states:

  • The SVG Transforms module extends the two-dimensional transformation pipeline in SVG to allow graphical elements to be transformed in three-dimensions. For elements to be transformed using three-dimensonal transformations a Z axis is introduced by this module. The elements in SVG can be positioned along the Z axis and transformed in 3D space, however the elements themselves still remain two-dimensional. A perspective projection can be applied to elements to give the illusion of depth. The projection plane for a perspective projection is the X-Y plane (where Z = 0). All are still rendered to this plane. Unless stated otherwise, all elements are rendered in document order as per the existing SVG specifications.

So Firefox will not allow until it becomes standard. Whereas Chrome will add stuff so developers can play with it, but dont expect it to work in other browsers.

 

If you check out this bug report from Mozilla. Mozilla dev team state that they don't support 3D transforms on SVG elements

 

https://bugzilla.mozilla.org/show_bug.cgi?id=923193

 

The next version of SVG 2.0 will allow full 3D transforms on SVG elements.

 

You can always use 3D transforms on a parent <div> tag element :)

Link to comment
Share on other sites

  • 7 months later...

Hi Diaco,

 

one question regarding your Codepen example, as it seems to face the same issue as we are experiencing for our usecase.

At the 'touch-area' of two shapes (or in your example the area where the two masked svg-shapes touch), browsers do render a thin line when the shapes are positioned in certain orientations in 3d-space.

I modified you Codepen example so that the ring is being filled with white color:

Now you should be able to see a thin line being rendered where the two shapes touch. We could observe this behavior for Chrome and FF on Windows as well for Chrome and FF on Mac. I attached a screenshot where the rendering-error is visible, too:

 

kRr91no.png

 

Any ideas how to fix this issue?

 

Best,

Clemens

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...