iOS UIView Animation CATransform3DMakeRotation confusion

Question

I have a UIView that I am trying to animate flipping down, while having its axis at the bottom of the view. E.g.:

To do this, I am trying to use a UIView animation:

[UIView animateWithDuration:3 delay:0 options:UIViewAnimationCurveEaseOut animations:^{

     // Flip Down
     top3.layer.anchorPoint = CGPointMake(0.5, 1.0);
     top3.layer.transform = CATransform3DMakeRotation(M_PI, 1, 0, 0);

 } completion:^(BOOL finished) {

     // Reset?
     //top3.transform = CGAffineTransformMakeScale(1, 1);

 }];

Right now it isn't working how I want, it seems like the view is animating AWAY from the user rather then toward. It does't seem to give a 3D effect that makes it look closer to the user when rotating down, as shown in my image. I am positive that this is because of my lack of understanding how to use CATransform3DMakeRotation.

Questions:

• How can I make the view appear closer to the user as it drops? Such as skewing it as in my image example?
• When I set my anchorPoint it shifts my view down, how can I prevent this and still set my anchorPoint?
• With UIView animation, can I use easing settings? Used UIViewAnimationCurveEaseOut in options.
• Can I use gravity settings?

Answer 1

• It’s not completely clear from your question, but it sounds like you’re not seeing a perspective distortion during the animation—the view’s staying rectangular as it rotates, right? For a CALayer to display with perspective, its transform needs to have the m34 element set, as described here.
• To compensate for the anchorPoint moving your view’s layer, you need to change the view’s original position.
• Yes. There are several animation options in addition to the one you’re using, and you can combine them like this (for example): UIViewAnimationOptionBeginFromCurrentState | UIViewAnimationOptionCurveEaseInOut | UIViewAnimationOptionAllowUserInteraction.
• Core Animation doesn’t really have any concept of physics. Depending on the effect you’re going for, you can achieve it by chaining multiple animations together with particular easing settings—for instance, a falling object that hits a solid surface would use an “ease in” animation on its way down, then an “ease out” if it then bounced back up.