CATransform3DMakeRotation hides half the UIView during animation

Question

Using the following UIView animation with CATransform3DMakeRotation, half the UIView will disappear during the transform and re-appear on completion. This only happens when theres a UIImageView behind the UIView in the view hierarchy of interface builder.

[UIView animateWithDuration:1.0 delay:0.0 options:nil animations:^{
        myView.layer.transform = CATransform3DMakeRotation(M_PI,0.0,1.0,0.0);
    } completion:nil];

The following is the view layout in interface builder

And the animation result below.

The 2nd image is before any animation has taken place, the left half disappears. After it has shrunk then grown past the center point the right side (previous left side) reappears as shown in 4th image.

When the background image is set using

self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"jeans.png"]];

The animation completes as expected.

Answer 1

For the record, the answer was in my comment

imageView.layer.zPosition = -400;

Alternatively you could do

myView.layer.zPosition = 400; // or some number greater than width/2

It looks like part of the rotating view is occluded by the background view. Since it rotates around its center point, part of it passes into negative-z space, so is behind the background.

So from

------- imageView
------- myView

to

     / myView
    /
------- imageView
  /
 /