How do I use CATransform3D on a UIView to add a specific type of perspective?

Question

I've been creating iPhone apps for a while now, using basic transformations (rotations, scale, etc) but now I'd like to do something a little more complex.

Maths really isn't my strongest point... but I was wondering how I might go about adding 'perspective' to a UIView (see the image below). I quickly mocked the screenshot up using skew options in Photoshop.

I have had a look around stackoverflow for solutions to this, I found http://stackoverflow.com/questions/347721/uiview-perspective-transform/353611#353611 which works excellently - but it's not really what i'm after because the height of the left most edge is larger than the right most edge.

Does anyone know how I might go about doing this CATransform3D but without these differing heights?

Answer 1

If you just want to skew, you don't need 3D transform. An affine transform will suffice.

-(void)drawRect:(CGRect)rect {
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGAffineTransform transform = CGAffineTransformIdentity;
    transform.b = -0.1;
    transform.a = 0.9;
    CGContextConcatCTM(ctx,transform);
    // do drawing on the context
}

this is a modified copy&paste from a project which has a similar transform, but you may need to tune the parameters a and b. This will give a 1 in 9 rise from left to right (0.1/0.9), while condensing from left to right to 90% (0.9).