b2cloud

8th November 2011

iOS Perspective Transform

Guides | Tutorial By 5 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))

CG_INLINE CATransform3D
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).:
    http://itunes.apple.com/nl/app/perspectivetest/id481006743?mt=8

    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.

    Regards,
    Voppe

    • 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

    Hi,

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

    Regards,

    Bastien

    • 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

Recommended Posts

App processing vs server processing

Post by 5 years ago

When building an app that connects to a web service it’s often best to put the processing load on your server, as opposed to the app. For example, say your web service returned a list

Got an idea?

We help entrepreneurs, organizations and established brands from around
the country bring ideas to life. We would love to hear from you!