iOS Perspective Transform

Guides | Tutorial By 6 years ago

A couple of months ago I posted on how to create a distort transform in iOS using a CGAffineTransform. Since then I have been doing a lot of experimenting with transforms trying to create different effects. Something I wanted to do was create a book like effect where the page opened up and looked as if it was coming towards you. This was impossible with a regular CGAffineTransform (3×3 matrix), so I needed to upgrade to a CATransform3D (4×4 matrix) to create the illusion of perspective.

#define CATransform3DPerspective(t, x, y) (CATransform3DConcat(t, CATransform3DMake(1, 0, 0, x, 0, 1, 0, y, 0, 0, 1, 0, 0, 0, 0, 1)))
#define CATransform3DMakePerspective(x, y) (CATransform3DPerspective(CATransform3DIdentity, x, y))

CATransform3DMake(CGFloat m11, CGFloat m12, CGFloat m13, CGFloat m14,
				  CGFloat m21, CGFloat m22, CGFloat m23, CGFloat m24,
				  CGFloat m31, CGFloat m32, CGFloat m33, CGFloat m34,
				  CGFloat m41, CGFloat m42, CGFloat m43, CGFloat m44)
	CATransform3D t;
	t.m11 = m11; t.m12 = m12; t.m13 = m13; t.m14 = m14;
	t.m21 = m21; t.m22 = m22; t.m23 = m23; t.m24 = m24;
	t.m31 = m31; t.m32 = m32; t.m33 = m33; t.m34 = m34;
	t.m41 = m41; t.m42 = m42; t.m43 = m43; t.m44 = m44;
	return t;

As with the distort transform, the x and y values adjust intensity. I have included a CATransform3DMake method as there are no built in CATransform3D methods to create a transform by passing in 16 values (mimicking the CGAffineTransformMake method).

For those that have never seen the CATransform3D struct before, you must apply the transform to a CALayer‘s transform, as opposed to a CGAffineTransform which is applied to the UIView‘s transform. If you want to apply it to a UIView, obtain it’s layer then set the transform (myView.layer = CATransform3DMakePerspective(0.002, 0)).

Example of use

And with some work:

  • voppe

    Hi Tom,
    Interesting stuff.
    I also have been playing around with transformations and kind of educated myself from info like you publish on the web, as I find the Apple documentation rather meager. To help others, I made an App (PerspectiveTest) that explains the basics in a simple way (I hope).:

    If you have any suggestions on how to bring this to the attention of others who may benefit from it, please let me know or forward the link to them.


    • tom

      That’s pretty cool, looks like it would be able to help a lot creating a transform to suit your needs, rather than trial and error in code

  • Bastoche


    What do represent the two parameters in CATransform3DMakePerspective(0.002, 0) ?



    • tom

      The first is how much you want it to skew on the X axis (horizontally), and the second for the Y axis (vertically)

      • Bastoche

        Yes, but what are the units ? (radians … ?)

        • tom

          The value goes directly into the transform, if you want to make it radians, or any other type of unit you will need to put some math in there