I’m using the new 4.6 UI, and trying to create canvas UI elements that can be “flipped” to show a back side. I’m using the Canvas Render Mode “Screen Space - Camera” with a perspective camera.
Unfortunately, if I simply rotate an existing element 180 degrees, I just see an upside-down, mirrored rendering of the front side. The rendering order of the child elements is not reversed, so a child element at the “back” is still obscured by elements at the “front” (even though the entire parent has been flipped).
Is there any way to create this front/back effect using the Canvas UI?
You must want to see the flipping occur via animation, right? Otherwise you’d just swap the contents of your group-o-elements.
Well, at the exact moment all the elements are facing the camera edge-on, for all intents and purposes, the elements become invisible. During that frame, swap the contents of your group to an identically-sized “B-side” alternate version.
I’m currently investigating this myself. In my case, I am implementing a “card” that can be flipped over, and then back. So the backside should have another surface. I will use an Image or Button for this. For now this seems to do the trick, but I don’t know if it will work well down the line:
In the flip animation, add a keyframe at rotation of 90 degrees. There you can add another image. Also, set scale to -1 depending on what axis you rotate the image. I flip the card over on the Y axis, so I needed to invert the scale of the X axis to get the backside of the card to not be mirrored to the viewer.