title: CALayer overlaps top layer after transformation
body: <p>I have two CALayers each showing an image. The first (left) layer in the view hierarchy is on top of the second one. The problem is that after I apply a rotation around the y-axis, the right layer is all of a sudden drawn above the layer that's supposed to be on top.</p>
  
  <p>I tried using different zPosition values. Nothing. My other guess was that maybe the animation of the right layer finishes <em>after</em> the animation for the left layer and hence it is drawn on top. To test this, I applied the transformation for the right layer first, but still the same result. Oh, I also tried CA transactions without any luck.</p>
  
  <p>Here a screenshot: </p>
  
  <p><img src="https://i.stack.imgur.com/5INHF.jpg" alt="the problem"></p>
  
  <p>What is the correct way to animate a number of CALayers while keeping their order?</p>
  
  <p>Thanks, Mark.
  EDIT:</p>
  
  <p>Here is the code for the transformation. I tried disabling the animation, but got the same result.</p>
  
  <pre><code>[CATransaction begin];
  
  [CATransaction setValue:(id)kCFBooleanTrue
                   forKey:kCATransactionDisableActions];
  
  CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;
  rotationAndPerspectiveTransform.m34 = 1.0 / 400;
  rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, DegreesToRadians(70), 0, 1, 0);
  
   for(CALayer *layer in [self.layer sublayers]) {
      // transform the two layers
      layer.transform = rotationAndPerspectiveTransform;
  
  }
  [CATransaction commit];
  </code></pre>