Question

I’m having an odd problem with CATransform3DMakeRotation. When the rotated view is in the center of the superview, it looks like this:

This is how it’s supposed to look. However, when it’s somewhere else in the superview, say, in the lower left corner, it looks like this:

Note that it is tilted to the right. Same thing happens when it’s in the lower right corner, only that it tilts to the left. Is there some way to make it tilt the way it should all the time and in every position? The code to achieve this transformation is as follows:

    CALayer *layer = view.layer;

    CATransform3D aTransform = CATransform3DIdentity;
    float zDistance = 1000;
    aTransform.m34 = 1.0 / -zDistance;  

    self.view.layer.sublayerTransform = aTransform;


    CABasicAnimation *rotateAnim = [CABasicAnimation animationWithKeyPath:@"transform"];
    rotateAnim.fromValue= [NSValue valueWithCATransform3D:CATransform3DMakeRotation(0, 0, 0, 0)];
    rotateAnim.duration=0.12;
    rotateAnim.toValue=[NSValue valueWithCATransform3D:CATransform3DMakeRotation(20*M_PI/180, 1, 0, 0)];

    rotateAnim.removedOnCompletion = NO;
    rotateAnim.fillMode = kCAFillModeForwards;
    [layer addAnimation:rotateAnim forKey:@"rotateAnim"];

Answer 1

You’ve applied perspective at the superview’s layer, and that’s what you’re getting. If you want perspective based on the individual sublayers (without considering the overall perspective), then you have to apply perspective to them individually. For example:

CALayer *layer = view.layer;

CATransform3D aTransform = CATransform3DIdentity;
CGFloat zDistance = 2000.;
aTransform.m34 = 1.0 / -zDistance;  

CABasicAnimation *rotateAnim = [CABasicAnimation animationWithKeyPath:@"transform"];

rotateAnim.fromValue= [NSValue valueWithCATransform3D:aTransform];
aTransform = CATransform3DRotate(aTransform, 20*M_PI/180, 1, 0, 0);;
rotateAnim.duration=0.12;
rotateAnim.toValue=[NSValue valueWithCATransform3D:aTransform];
layer.transform = aTransform;

[layer addAnimation:rotateAnim forKey:@"rotateAnim"];

In this example, I apply perspective (m34) in both the fromValue and the toValue of the layer. This then gives you perspective relative to an observer standing in front of the layer itself. Your original code had an observer standing in front of the center of the view, and so you get some skew perspective.

I made some other small changes here. I typically put the observer at 2000 rather than 1000. I find the perspective at 1000 is often more than is desired (unless you’re actively going for strong perspective). Depending on your problem, you might want to get rid of perspective entirely. Don’t apply it just out of habit.

More importantly, I changed how you were applying the animation at the end. Using removedOnCompletion=NO and kCAFillModeForwards makes things much more complicated than just applying the animation to the model (layer.transform=aTransform) and letting the animation be removed normally. In particular, using removedOnCompletion=NO means that later requests for layer.transform will always return the old value, not the current value. It also makes things complicated if you apply further animations to this layer. This is why the default is to remove the animation when complete.