CATransform3D rotate causes half of image to disappear

Question

I'm using the following code to rotate an image, but half the image (down the y-axis) that has been rotated "out of" the page, disappears. How to fix? heading is in radians.

    CALayer *layer = myUIImageView.layer;
    CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;
    rotationAndPerspectiveTransform.m34 = 1.0 / 500;
    rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, heading, 0.0f, 1.0f, 0.0f);
    layer.transform = rotationAndPerspectiveTransform;

Answer 1

The solution to this was to set the zPosition property of all my layers appropriately. Thanks is due to @Brad Larson, who suggested this solution in a comment here. It seems that, when you start using CATransform3D, the normal zindex view hierarchy established by addsubview is thrown out the window.

Answer 2

Setting the anchorPoint to {0.0, 0.0} works as well (as Liam already pointed out).

Here's the full code snippet for changing the anchorPoint without changing the layer's position on screen:

     layer.anchorPoint = CGPointMake( 0.0, 0.0 );

     CGPoint position = layer.position;
     CGSize size = layer.bounds.size;

     CGFloat posX = position.x - size.width / 2.0;
     CGFloat posY = position.y - size.height / 2.0;

     layer.position = CGPointMake( posX, posY );

Answer 3

In case anyone else is stuck, I finally got around this by dramatically inflating the "z-space" between otherwise incremental layers.

Consider three views A, B, and C positioned A -> B -> C inside their parent view.

Each view's index inside the parent view is the de facto position for that view. By grabbing those values, we'd find that that view A has a position of 0, view B has a position of 1, and so forth.

To solve the disappearing/clipping issue, I assign zPosition to each view by multiplying its position by an arbitrarily large value:

viewA.layer.zPosition = (0 + 1) * 5000
viewB.layer.zPosition = (1 + 1) * 5000
viewC.layer.zPosition = (2 + 1) * 5000

Explanation

Imagine a 100px-wide view B rotating 12 degrees into the screen. This causes the left half of view B to disappear below view A. Using trigonometry, we can find how "deep" view B goes:

sin(12°) × ^100px⁄₂ = 10.39px ~ 10.4 px

That means the view A zPosition property needs to be decremented by 10.4 so that it doesn't clip view B. If you have any other views below view A in the same hierarchy, they would also have to be similarly decremented. (Alternatively, view B and higher views would need to have their layers' zPosition incremented by 10.4.)

I found that if we increase the gaps between view layers, there is no need to tediously decrement or increment the layers. I chose an arbitrarily large value of 5000 because it would take a view wider than 10,000 pts to breakthrough neighbouring views: sin(90°) × ^10,000⁄₂ = 5000 (90 degrees gives the maximum depth or height).

Answer 4

  layer.anchorPoint = CGPointMake(0.0, 0.0);