UIView 3DCube like Clear-app

Question

I've searched all posts on google and stackoverflow but I simply can't solve this puzzle. I'm trying to recreate the effect that the now-famous todo app 'Clear' does when adding a new task. They have some sort of animation that from the top a new task appears in some sort of 3D-cube effect. The special thing they have is that when you look closely the left and right bottom corners always stay in the same place.

Right now I have the following: one UIView of 320x460 set at point 0,0 and one UIView of 320x460 set at point (0,-460). What I want is the top UIView to come down in the same cube-effect as Clear from the top. This is what I have so far:

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    //startLoc is defined globally to remember the first position
    startLoc = [[touches anyObject] locationInView:self];
}

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    CGPoint location = [[touches anyObject] locationInView:self];
    float difference = location.y-startLoc.y;         

    if(diff > 0 && diff < 90)
    {
        //Init the transform
        CATransform3D transform = CATransform3DIdentity;
        transform.m34 = perspective;
        //Rotate (radians is a degree-to radians function)
        transform = CATransform3DRotate(transform, radians(90-diff), 1.0f, 0.0f, 0.0f);
        //Also translate the view down        
        transform = CATransform3DTranslate(transform, 0.0f, 230+diff, 0.0f);
        //the 230 is necessary I think for the Anchorpoint but I'm not sure
        secondView.layer.transform = transform;
}    

}

It works somehow but not correctly, as soon as I do the rotation the view becomes bigger and the bottom-left and bottomright corners are out of the view. If I make the view smaller and then do a 3Dscale it's also messed up. I did already solve the issue of half of the image disappearing by correctly setting the zPosition of the layers, but this is as far as I get. I've tried to use code from other projects but all their 3D cube effects are not the same as the 'Clear' App. The only one that comes close is the iCarousel project but I'm not able to use the correct code from the app, I can't get it to work. Can someone help me?

Answer 1

Here are some links that specifically cover the topic of UIView 3D perspective transformations:

http://www.sunsetlakesoftware.com/2008/10/22/3-d-rotation-without-trackball

http://watchingapple.com/2008/04/core-animation-3d-perspective/

This post is also relevant: How do I apply a perspective transform to a UIView?

Answer 2

You can have a look at an opensource implementation on GitHub mystcolor/JTGestureBasedTableViewDemo