Rotating two images around y axis such that their boundaries meet

Question

I have following two images:

And I rotate the left image (rotation point is its left edge) around y-axis at 30 degrees and the right image (rotation point is its right edge) around y-axis at -30 degrees to get following output:

Now I want the images to stay joined together just as they were prior to rotation but as you see a gap appears in between them so I thought I can do that by shifting the left image towards right & shifting the right image towards left till the two images meet each other. I thought the following formula should give me the correct translation value but it doesn't work and something is still missing.

translationValue = (widthOfImage - (cos(30) x widthOfImage))

I believe the above formula doesn't work because the depth of the image is not being taken into consideration. How to resolve this?

Due to nature of the problem I'm trying to solve I cannot change the rotation point of left image to be its right edge & rotation point of right image to be its left edge.

Answer 1

the solution is to use CATransformLayer with sublayers if you are also animating the rotation simultaneously: you make a layer parent of a sublayer so when you rotate parent the child sticks together and also rotates with the parent, then you only rotate the child back.

see this link for a code snippet: https://stackoverflow.com/a/5539618/550393

Answer 2

Does the imagebox change its width as a whole or is it just the image changing, if so that's your problem. As for your translationValue might be sin(30) instead of cos.

Answer 3

It would probably be easier to rotate the 2 views up towards the viewer from their shared edges, while also translating them back along the Z axis so the leading edges stay at the surface of the screen.

That way the 2 views would stay linked together without any gaps or overlap.

The tricky part would be getting the timing of the the Z translation right. The change in Z of the leading edges should follow a sine curve. You might need to use a keyframe animation of the Z coordinate of your views, and create a bezier curve that closely approximates a sine curve.